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

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

Angular2动态模板

1 个答案: