Angular 角度2：使用插值的多个布局文件

我正在构建一个Angular 2应用程序，需要两个布局文件。一个用于已注销的用户。。。（登录/注册视图等）和一个供登录用户查看实际应用程序本身的视图。如何使用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>

/*输出注销视图的所有html布局元素*/
/*输出登录/应用程序视图的所有html元素*/

但是我不知道在哪里或如何设置

布局

变量

---

我认为这个变量最好设置在主视图组件中。。。还是有更好的方法

我建议您使用不同的路由切换视图，即，一个路由用于已登录用户，解析为

组件a

，另一个路由用于未登录用户，解析为

组件B

我更喜欢使用这种策略，因为您可以使用

CanActivate

hook在路由级别阻止用户，也就是说，在进入特定路由之前，需要进行验证。如果为false，则用户将无法访问该路由。如果这是真的，则路由被激活

您可以阅读文档中有关如何使用

CanActivate

的精彩文档

---

希望对你有所帮助。

我通过使用转写法找到了我想要实现的目标。。。据我所知，官方文件中没有提到这一点

这只是在布局文件中使用

的一种情况，每个布局的主要内容都需要放在布局文件中

// 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>

//例如：app-layout.html
//使用此布局的内容将显示在下面

然后在导入并包含在指令中后，使用布局将其显示在视图中，如

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

//例如：dashboard.html
你好{{user}}！

---

希望这有助于尝试实现相同目标的人只需注入一个共享服务，向组件提供当前的

loggedIn

状态

@Injectable()
class AuthService {
  isLoggedIn = new BehaviorSubject(false);

  ...      
}

@组件({
模板：`
/*输出注销视图的所有html布局元素*/
/*输出登录/应用程序视图的所有html元素*/
`
})
类MyComponent{
构造函数（私有authService:authService）{}；
}

---

另请参见

如果未登录，我已经在使用CanActivate guard方法将用户重定向到

/login

路线，但我想知道如何创建可重用的布局文件，用于多条路线，具体取决于哪个路线/视图组件处于活动状态。如果我明白了这一点，是否要将同一个html文件与以不同路径显示的不同组件一起使用？是的，没错。因此，“注销”布局将简单地显示一个徽标，然后是登录表单或注册表单的嵌套路由视图，“登录/应用”布局将具有主应用程序导航，然后显示其中每个应用程序路由的内容。。。希望这是有意义的？在我看来，最好是分开的关注点，我。e、 ，创建用于处理登录和注册过程的组件和路由，以及用于处理登录应用程序的另一个组件和路由。在这里，我们使用我建议的关于你说你正在使用的可以激活守卫的方法。此防护仅在经过身份验证的路由中使用。以这种方式分离更容易维护大型应用程序。好的，我明白你现在所说的，我想。。。所以有两个主要组件，每个组件都有嵌套的路由。。。对吗？我很感谢你的回答，这肯定会有用，但对于我正在构建的应用程序的大小，使用上述分离布局文件中的转换是我的首选解决方案，因为它可以保持事物分离和整洁，并使用防护来保护路线。这是在angular 2中处理多个布局的最佳方法吗？与具有简单布局的登录页面和具有其他布局的其他页面一样，您可以使用路由器显示各种视图。这只是以各种方式显示单个组件。在我的app.component中，当我导航到登录时，我就有了这个组件，我想删除，但对于所有其他页面，当用户登录时，我只想按原样显示布局。我是否必须将ng if与服务一起使用来归档此文件？最好的办法是什么？你有没有链接或什么可以帮我的？我已经研究了好几天了。

*ngIf

而且服务听起来很适合这个用例。你可以试试这个。希望能有帮助。现在已经使用了一段时间，无论你想在应用程序中使用多少布局，它都可以很好地扩展。很抱歉，这完全不清楚。这个例子似乎还没有完成。

bootstrap(AppComponent, [..., AuthService]);

@Component({
  template: `
<div [ngSwitch]="authService.isLoggedIn | async">

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

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

</div>
`
})
class MyComponent {
  constructor(private authService:AuthService) {};
}