Question

我有以下app结构：

master.html - 我的应用组件HTML模板结构：

<header>
<sidebar-right>
<sidebar-left>

<router-outlet>

<footer>

现在..我有两个场景：

客人
登录用户

如果用户是访客，我需要显示没有侧边栏的<intro></intro>组件，如果用户是登录成员，请向路由器插座显示所有这些标签（侧边栏，标题等）。。）

我怎么能这样做？由于我无法在router outlet内使用*ngIf，因此我不知道如何使其按上述方式运行。

有什么想法吗？

理想的输出理念：

<section *ngIf="loggedIn">
<header>
    <sidebar-right>
    <sidebar-left>

    <router-outlet>

    <footer>
</section>
<section *ngIf="!loggedIn">
<intro></intro>
</section>

Answer 1

将访客视图和用户视图放在两个不同的路径中，然后添加一个Route Guard，，它将作为可查看路径的条件。如果它在router-outlet标签上工作，这就可以实现* ngIf。

将您希望Logged-In用户的内容移出应用程序组件HTML模板并进入自己的组件。对访客用户的内容执行相同操作。

在路由配置中将两个组件添加为路由，并将Logged-In用户组件的“canActivate”值设置为导入的“身份验证保护服务”（您将创建）：

import { AuthGuardService } from '../auth-guard.service';

const routes: Routes = [
  { path: 'guest',
    component: guestComponent
  },
  { path: 'logged-in-user',
    component: loggedInUserComponent,
    canActivate: [AuthGuardService]
  }
];

创建Guard Service：

import { Injectable }     from '@angular/core';
import { CanActivate }    from '@angular/router';

@Injectable()
export class AuthGuardService implements CanActivate {
  loggedIn: boolean; 

  canActivate() {
    return this.loggedIn;
  }
}

只有当loggedIn值为true时，才能导航到loggedInUser组件并进行查看。

您可以在angular.io网站上找到这个以及更多文档： https://angular.io/docs/ts/latest/guide/router.html#!#guards

Rouer outlet * ngIF

1 个答案: