Angular 正在尝试将组件添加到智能管理

我在一个已经开始工作的网站上工作，该网站是使用智能管理模板构建的

作为第一步，我正在尝试向仪表板添加一个组件

以下是我遵循的命令和步骤：

-命令行：

ng g module test --routing
cd test
ng g component test --flat

-添加到文件app.routing.ts中：

{path: 'test',loadChildren:'app/test/test.module#TestModule'}

-添加到文件test-routing.module.ts中：

import { TestComponent } from './test.component';

const routes: Routes = [
  {
  path:'',
  component:TestComponent
  }
];

-添加到文件test-routing.module.ts中

import { SmartadminModule } from '../shared/smartadmin.module';

及

test.component.html仅包含：

<p>
  test works!
</p>

当我调用页面时，我会得到仪表板、页眉、页脚。。。 但是在项目的其他模块中，仪表板。。。通过添加以下内容明确包括：

<sa-header></sa-header>
<sa-navigation></sa-navigation>
<div id="main" role="main">
  <sa-ribbon></sa-ribbon>
  <router-outlet></router-outlet>
</div>
<sa-footer></sa-footer>
<sa-shortcut></sa-shortcut>

我希望有人能帮我解决这个问题

---

谢谢

我想您提供的带有布局的代码片段来自app.component.html。因此，您可以将其稍微更改为如下所示：

<router-outlet></router-outlet>
<sa-footer></sa-footer>
<sa-shortcut></sa-shortcut>

我不知道的是，这一变化将如何影响其他路线，以及这是否是一种理想的行为

最好保持HTML原样，并在app.component.ts中做一点小改动

然后您可以更改app.component.html

---

只是想检查一下，您的问题是，路由没有导航到您的测试组件？不，我的问题是，我不希望仪表板和标题显示，除非我使用“谢谢”将它们添加到test.component谢谢您的回复。项目中没有app.component.html。我提供的代码段来自另一个名为payment-services.component.html的文件，当我从该文件中删除该代码段时，仪表板、页眉和页脚将消失。我希望我正在添加的新模块以同样的方式进行测试。你能提供stackblitz吗？我有点搞不懂你想达到什么目的。我为你的担心而耽搁你。我的项目不在stackblitz上。我可以为您提供团队查看器访问权限，以便您检查我的意思吗？您有GitHub回购协议吗？这可能会更容易，因为我不能为视频通话留出太多时间

<router-outlet></router-outlet>
<sa-footer></sa-footer>
<sa-shortcut></sa-shortcut>

<sa-header></sa-header>
<sa-navigation></sa-navigation>
<div id="main" role="main">
  <sa-ribbon></sa-ribbon>
  <!-- Other components or HTML code -->
</div>

import { Router, NavigationEnd } from '@angular/router';

showHeaderAndNavigation: boolean = false;

ngOnInit() {
  this.router.events.filter((event: any) => event instanceof NavigationEnd)
  .subscribe(event => {
    this.showHeaderAndNavigation = event.url === '/test';
    //console.log(this.showHeaderAndNavigation);
  });
}

<sa-header *ngIf="showHeaderAndNavigation"></sa-header>
<sa-navigation *ngif="showHeaderAndNavigation"></sa-navigation>
<div id="main" role="main">
  <sa-ribbon></sa-ribbon>
  <router-outlet></router-outlet>
</div>
<sa-footer></sa-footer>
<sa-shortcut></sa-shortcut>