Angular 2动态

Question

我是Angular 2的新手。我只是被扔进了火来修复一个有角度的2应用程序。

我试图弄清楚如何动态加载组件，这是一个例子。在此App模块中，“AppComponent”是第一个加载的。我想为每个HTML页面都有一个AppComponent，这是正确的方法吗？

1）。为每个页面创建一个根应用程序组件，例如：HomepageAppComponent，SitesAppComponent（对于sites.html）等？

2）。使用一个AppComponent并以某种方式告诉它在sites.html上加载SitesComponent。

这是app.module.ts文件示例：

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { UniversalModule } from 'angular2-universal';
import { AppComponent } from './components/app/app.component'
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { SitesComponent } from './components/sites/sites.component';
import { CounterComponent } from './components/counter/counter.component';

@NgModule({
    bootstrap: [ AppComponent ],
    declarations: [
        AppComponent,
        NavMenuComponent,
        CounterComponent,
        SitesComponent,
        HomeComponent
    ],
    imports: [
        UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.
    ]
})
export class AppModule {
}

Answer 1

如果您的AppComponent对于每个页面都相同，那么只需将routeroutlet元素放在AppComponent中。然后为HomeComponent，SiteComponent创建路线......