一 在index.html中，替换根组件选择器
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Angular4ReactiveForm</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> </head> <body> <app-hero-list></app-hero-list> </body> </html>
二 在根模块的注解中，替换根组件
import { BrowserModule } from '@angular/platform-browser'; import { ReactiveFormsModule } from '@angular/forms'; import { NgModule } from '@angular/core'; import { HeroListComponent } from './hero-list/hero-list.component'; import { HeroDetailComponent } from './hero-detail/hero-detail.component'; @NgModule({ declarations: [ HeroListComponent, HeroDetailComponent ], imports: [ BrowserModule, ReactiveFormsModule ], providers: [], bootstrap: [HeroListComponent] }) export class AppModule { }
三 如果浏览器控制台没有报错 ( The selector "app-hero-list" did not match any elements )，并编译、运行，则替换成功。