Angular2動的テンプレート

Question

どのように私はangular2で入れ子になったテンプレートを使用しますか？だから、基本的に私は、基本コンポーネントを持っており、それが

- entry.component.ts 
- entry.component.html 
- navigation 
-- sidenav.ts 
-- sidenav.html 
-route1 
--route1.ts 
--route1.html 

チャイルズだentry.component.htmlは骨格とコンテンツルート変更に動的に生成する必要がありますする必要があります。

これは可能ですか？

Answer 1

子ルートでテンプレートを使用します。

publicとsecureで鉱山を分割し、すべてのレイアウトをレイアウトしてからレイアウトを選択します。

子ルートをエクスポートして、正しいルートがレイアウトルートで呼び出されていることを確認してください。また、各子ルートファイルにredirectToを必ず使用してください。

app.routing.ts 

    const APP_ROUTES: Routes = [ 
     { path: '', redirectTo: '/home', pathMatch: 'full', }, 
     { path: '', component: PublicComponent, data: { title: 'Public Views' }, children: PUBLIC_ROUTES }, 
     { path: '', component: SecureComponent, canActivate: [Guard], data: { title: 'Secure Views' }, children: SECURE_ROUTES } 
    ]; 

その後、私はレイアウトフォルダに

レイアウト

layouts/public/public.components.ts 
layouts/public/public.components.html 
layouts/secure/secure.components.ts 
layouts/secure/secure.components.html 

子ルート /public/piublic.routes.ts

export const PUBLIC_ROUTES: Routes = [ 
     { path: '', redirectTo: 'home', pathMatch: 'full' }, 
     { path: 'p404', component: p404Component }, 
     { path: 'e500', component: e500Component }, 
     { path: 'login', component: LoginComponent }, 
     { path: 'register', component: RegisterComponent }, 
     { path: 'home', component: HomeComponent } 
    ]; 

を持っています

/secure/secure.routes.tsそのHTMLテンプレートを作成するテンプレート

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    templateUrl: './benefits.component.html', 
}) 
export class BenefitsComponent { 

    constructor() { } 

} 

にロードするコンポーネントを作成

export const SECURE_ROUTES: Routes = [ 
    { path: '', redirectTo: 'overview', pathMatch: 'full' }, 
    { path: 'items', component: ItemsComponent }, 
    { path: 'overview', component: OverviewComponent }, 
    { path: 'profile', component: ProfileComponent }, 


{ path: 'reports', component: ReportsComponent } 
]; 

、

/public/benefits.component.html' 

今でそれは公共のルートの一部です。誰かが公共のルートに行くと、それはチリのルートにロードされます。 /public/public.routes.tsファイル内に新しいhtmlページを読み込むために作成する新しいルートごとに追加します。