0

我正在使用 Smart Admin 模板构建的已经运行的网站。

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

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

-命令行：

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';

和

SmartadminModule inside imports:[]

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>

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

谢谢

4

1 回答 1

1

我想您提供的带有布局的片段来自app.component.html. 所以你可以稍微改变一下，看起来像这样：

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

然后test.component.ts看看这样

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

我无法判断的是这种变化将如何影响其他路线，以及它是否是一种理想的行为。

可能会更好地保持 HTML 原样并在app.component.ts

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);
  });
}

然后你可以改变你的app.component.html

<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>
于 2019-07-22T11:28:54.173 回答