Angular2 dynamisches Templating

Question

Wie verwende ich verschachtelte Vorlagen in angular2. Also im Grunde habe ich eine Basiskomponente und es ist Childs

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

entry.component.html ein Skelett sein sollte und der Inhalt sollte dynamisch auf Routenänderungen erzeugt werden.

Ist es möglich, dies zu erreichen?

Answer 1

Verwenden Sie Vorlagen mit untergeordneten Routen.

Ich separate meins in public und secure Routing alles durch das Layout dann Laden der Routen für welche Layout gewählt wird.

Achten Sie auf die Kinder Routen exportieren und dass die richtigen Routen werden in der Layout-Route genannt. Stellen Sie außerdem sicher, dass Sie redirectTo in jeder untergeordneten Routen-Datei verwenden.

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

Dann habe ich ein Layout Ordner

Layouts

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

Kind Routen /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 } 
]; 

Komponenten Erstellen in die Vorlage

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

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

    constructor() { } 

} 

Das erstellen, seine HTML-Template

/public/benefits.component.html' 

Nun, da zu laden Es ist Teil der öffentlichen Route. Wenn jemand auf eine öffentliche Route geht, wird er in die Chile-Routen geladen. so innerhalb Ihrer /public/public.routes.ts Datei würden Sie es für jede neue Route hinzufügen, die Sie erstellen wollten, um Ihre neue html Seite zu laden.