Angular2动态模板

如何在angular2中使用嵌套模板。所以基本上我有一个基本组件，它是孩子的Angular2动态模板

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

entry.component.html应该是一个骨架和内容应动态地对路由变化而产生。

有没有可能做到这一点？

来源

2016-12-07 fefe

你的意思是你要使用模板，然后在模板中显示组件？ – wuno

是的，这将是主意。不要多次重复使用模板部件 – fefe

您的需求看起来像路由的基本行为，请检查文档，router-outlet是关键。 https://angular.io/docs/ts/latest/guide/router.html – Sakuto

使用具有子路由的模板。

我将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页面。

来源

2016-12-07 08:42:41 wuno

感谢这似乎是我想要的！ – fefe

Angular2动态模板

回答

相关问题