Question

我刚刚开始使用新版本的Angular框架。我想为管理员和公共部分提供两个不同的模板。

我不知道如何实现这一目标。我正在考虑将公共和管理组件包装起来的根组件，但我不知道如何使用rooter的模块来完成这项工作。

[编辑] 我想要这样的东西：

Root Template 
|_ public template
   |_ View 1
   |_ View 2
|_ admin template
   |_ Admin View 1
   |_ Admin View 2

Answer 1

我找到了方法。解决方案是通过包装器组件。路由可以与子数组参数嵌套，如下所示。

<router-outlet>

Public模板也需要render: function() { return ( <div> <SomeReactClass somefunction="myFunction"> <script dangerouslySetInnerHTML={{ __html: `function myFunction(index, row) {return index;}` }} /> </div> ); }标签，就像在AppComponent模板中一样。

Answer 2

您可以使用警卫，并在您的路线中使用管理员或成员定义您的路线。

首先设置您的路线，这是一个非常简单的示例，您可以扩展它以满足您的需求：

export const routes: Routes = [
    { path: '', component: PublicComponent },
    { path: 'member', component: MemberComponent, canActivate: [AuthGuard]},
    { path: 'admin', component: AdminComponent canActivate: [AdminGuard]},  
];
export const routing = RouterModule.forRoot(routes);

然后你创建两个警卫：

@Injectable()
export class AdminGuard implements CanActivate {

    constructor(private _authService: AuthService, private _router: Router) { }

    canActivate() {

        if (!this._authService.isAdmin) {
            this._router.navigate(['/']);
        }

        return this._authService.isAdmin;
    }
}

成员的AuthGuard：

@Injectable()
export class AuthGuard implements CanActivate {

    constructor(private _authService: AuthService, private _router: Router) { }

    canActivate() {
        if (!this._authService.isAuthenticated) {
            this._router.navigate(['/']);
        }

        return this._authService.isAuthenticated;
    }
}

然后你需要某种服务来保存成员的状态。请记住，提供者是作为单例植入的，因此这些值在您的应用程序中是一致的。

以下是有关路线防护的更多信息： https://angular.io/docs/ts/latest/guide/router.html

Angular2，如何将一个模板用于公共部件，将一个模板用于Admin部件

2 个答案: