Angular2 dynamic templating

Question

Как использовать вложенные шаблоны в угловом2. Поэтому в основном у меня есть базовый компонент, и это Чайлдс

- 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

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

Создание компонентов для загрузки в шаблон

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

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

    constructor() { } 

} 

создать свой шаблон HTML,

/public/benefits.component.html' 

Теперь, это часть общественного маршрута. Когда кто-то отправляется на общественный маршрут, он будет загружен в маршруты чили. поэтому внутри вашего файла /public/public.routes.ts вы добавите его для каждого нового маршрута, который вы хотите создать, чтобы загрузить свою новую страницу html.