Question

例如，使用Visual Studio 2017中为Angular应用程序生成的模板，当我创建新组件以及RouterModule中的关联路径时，每当我导航到该路径时，视图将包含NavMenuComponent。我知道隐藏导航的解决方法，但是我根本没有要初始化的NavMenuComponent。我该怎么做？

同样，我知道我可以隐藏导航，但是我根本不希望在生命周期中初始化NavMenuComponent，也不希望任何NavMenuComponent组件本身被初始化。感谢帮助

Answer 1

您可以有多个布局组件。

例如，基本的布局组件如下所示：

<nav></nav>
<router-outlet></router-outlet>
<footer></footer>

调用此NavLayoutComponent。并创建一个没有导航的另一个叫做LayoutComponent的东西：

<router-outlet></router-outlet>
<footer></footer>

然后在您的路线中定义要使用的布局组件：

{
  path: 'help', component: NavLayoutComponent,
  children: [
    {path: 'help', component: HelpComponent}
  ]
}

这里，所有孩子都有一个导航栏。

{
  path: 'login', component: LayoutComponent,
  children: [
    {path: '', component: LoginComponent}
  ]
}

这里，所有孩子都没有导航栏。

您的app.component.html仅具有：

<router-outlet></router-outlet>

这将插入适当的布局组件。

或者更简单，只需使用一个布局组件并使用* ngIf

<nav *ngIf="this.router.url IS IN MY LIST OF ALLOWED URLS"></nav>

请注意，如果* ngIf错误，它会阻止初始化。

在Angular 5中，如何避免某些组件/页面具有NavMenuComponent？

1 个答案: