Angular2，如何使用公共部分的一個模板和管理部分的一個模板

我剛開始玩新版Angular框架。我想爲管理員和公共部分設置兩個不同的模板。Angular2，如何使用公共部分的一個模板和管理部分的一個模板

我不知道如何實現這個目標。我正在考慮一個將包含公共和管理組件的根組件，但我不知道如何使用rooter模塊進行這項工作。

[編輯] 我想是這樣的：

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

來源

2016-09-23 Scandinave

我已經找到了辦法。解決方法是傳遞一個包裝器組件。路由可以像這樣與children數組參數嵌套。

const appRoutes: Routes = [ 
    { path: 'admin', component: AdminComponent }, 
    { path: 'public', component: PublicComponent, children: [ 
    { path : '', component: HomeComponent}, 
    { path : 'home', component: HomeComponent}, 
    { path : 'api', component: ApiComponent}, 
    { path : 'project', component: ProjectComponent}, 
    { path : 'blog', component: BlogComponent}, 
    { path : 'about', component: AboutComponent}, 
    ] }, 
    { path : '', redirectTo: 'public/home', pathMatch: 'full'}, 
    { path: '**', component: PageNotFoundComponent } 
];

公共模板也需要<router-outlet>標記，就像在AppComponent模板中一樣。

來源

2016-09-25 10:43:10 Scandinave

是否可以在子數組中放置一個「path：」'redirectTo：...'？ –

是的。你可以在每個條目中使用redirectTo – Scandinave

你可以使用衛隊，並在您的路線定義與admin或成員的路線。

首先設置你的路線，這是一個很簡單的例子，你前人的精力能夠延長它，所以它適合您的需要：

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; 
    } 
}

然後，你需要某種服務，它保存的狀態的內存BER。請記住，提供者是以單身身份植入的，因此通過您的應用程序的值是一致的。

下面是關於路線警衛一些更多的信息： https://angular.io/docs/ts/latest/guide/router.html

來源

2016-09-23 13:08:13 DNRN

我知道如何保護路線。我想要什麼，這是如何在我的應用程序中使用兩個不同的模板。目前，我有我的網站模板加載所有內容。如果我去管理頁面，我留在公共導航欄和頁腳顯示。 – Scandinave

你也可以用* ngIf來顯示管理員的東西：

– DNRN

但是從你的描述看來，你可以通過在根模板中設置一個來解決它。 – DNRN

Angular2，如何使用公共部分的一個模板和管理部分的一個模板

回答

相關問題