Angular 2 : Multiple layout files using interpolation

Question

我正在构建一个 Angular 2 应用程序并且需要两个布局文件。一种用于注销用户...(登录/注册 View 等)，另一种用于登录用户查看实际应用程序本身。 Angular 2 如何实现这一点？

目前我有一个 app.component.html 只是有

<main-navbar></main-navbar>
<router-outlet></router-outlet>

但我需要做的是:

<div [ngSwitch]="layout">

  <template [ngSwitchCase]="panelLayout">
      /* output all the html layout elements for the logged out views */
      <router-outlet></router-outlet>
  <template>

  <template [ngSwitchCase]="appLayout">
     /* output all the html elements for the in logged in/app views */
     <router-outlet></router-outlet>
  </template>

</div>

但我不知道在哪里或如何设置 layout 变量。

我假设这个变量最好在主视图组件中设置...或者是否有更好的方法来做到这一点？

Answer 1

我弄清楚了我试图通过使用嵌入来实现的目标......据我所知，官方文档中的任何地方都没有提到这一点!

这只是一个使用 <ng-content></ng-content> 的例子在每个布局的主要内容需要去的布局文件中。

// eg: app-layout.html
<app-header></app-header>
<app-navbar></app-navbar>
// content using this layout will appear below
<ng-content></ng-content>
<app-footer></app-footer>

然后在导入并包含在指令中之后，在像这样的 View 中使用它的布局

// eg: dashboard.html
<app-layout>
  <h1>Hello {{user}}!</h1>
</app-layout>

希望这可以帮助那些试图实现同样目标的人