Angular2动态模板

Question

How do I use nested templates in angular2. So basically I have a base component and it's childs

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

entry.component.html should be a skeleton and the content should be generated dynamically on route changes.

Is it possible to achieve this?

Answer 1

Use templates with child routes.

I separate mine in public and secure routing everything through the layout then loading the routes for which ever layout is chosen.

Make sure to export the child routes and that the correct routes are called in the layout route. Also make sure you use redirectTo in each child routes file.

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

Then I have a layouts folder

layouts

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

child routes /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 }
];

Creating components to load into the template

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

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

  constructor() { }

}

The create its html template,

/public/benefits.component.html'

Now that it is part of the public route. When someone goes to a public route it will be loaded in the chile routes. so inside your /public/public.routes.ts file you would add it for every new route you wanted to create to load your new html page.