由bootstrapjumbotron组件和router-outlet组成，jumbotron中的title,lead和content会随着你导航到不同的页面而变化，所以我把这3个标签分别用插值表达式title、lead、content替换掉，为此我创建了一个JumbotronServive服务提供者，通过rxjs消息推送实现。JumbotronServive的代码如下：import{Injectable}from'@angular/core';从'rxjs/Subject'导入{Subject}；exportclassJumbotron{constructor(publictitle:string,publiclead:string,publiccontent:string){}}@Injectable()exportclassJumbotronServive{privatejumbSource=newSubject();}jumb$=this.jumbSource.asObservable();setJumbotron(jumb:Jumbotron){this.jumbSource.next(jumb);首先创建一个Jumbotron类，其中包含三个属性title、lead、content分别对应jumbotron中的title、lead、content，然后写一个serviceprovider类，其中有一个rxjs的Subject对象声明（Subject允许一个特殊的Observable，其值被多播给多个观察者），然后调用Subject的asObservable()声明一个Observable对象jumb$来订阅Subject发送的消息。最后声明一个setJumbotron来发送修改后的Jumbotron对象。在AppComponent类中，我们可以订阅和更改超大屏幕中的标题、导语和内容。代码如下：jumServ.jumb$.subscribe(jumb=>{this.title=jumb.title;this.lead=jumb.lead;this.content=jumb.content;});router-outlet：路由出口，用于标记视图应该显示的位置，也就是说，所有导航到的路由视图都会显示在标签中。angular-cli（以下简称ng）已经为我们写好了基本的AppModule（Angular程序的根模块，Angular通过启动根模块来启动应用），这里是一个列表：import{BrowserModule}from'@angular/platform-b??rowser'；从'@angular/core'导入{NgModule}；从'@ng-bootstrap/ng-bootstrap'导入{NgbModule}；从'./app.component'导入{AppComponent}；@NgModule({declarations:[AppComponent,],imports:[BrowserModule,NgbModule.forRoot(),AppRoutingModule],providers:[JumbotronServive,],bootstrap:[AppComponent]})exportclassAppModule{}@NgModule装饰器将AppModule标记为AngularModule类（也称为NgModule类）。@NgModule接受一个元数据对象，告诉Angular如何编译和启动应用程序。@NgModule具有以下属性：imports——该模块声明的组件模板所需的类所在的其他模块，其中最重要的是BrowserModule，它是每个运行在浏览器中的应用程序所必需的。declarations——声明该模块拥有的视图类，并在AppModule中定义应用程序的唯一组件AppComponent。bootstrap——Angular创建并插入到index.html主页的根组件。providers-服务的创建者，被添加到全局服务列表中，可以在应用程序的任何部分使用。此处添加JumbotronServive是为了在bootstrap的jumbotron组件中提供title、lead和content的更新。AppRoutingModule是应用的路由模块，具体代码：import{NgModule}from'@angular/core';从'@angular/router'导入{RouterModule,Routes};从'./page-not-found.import{PageNotFoundComponent}component';constappRoutes:Routes=[{path:'',redirectTo:'/users',pathMatch:'full'},{path:'**',component:PageNotFoundComponent}];@NgModule({imports:[RouterModule.forRoot(appRoutes)],exports:[RouterModule]})exportclassAppRoutingModule{}首先定义了一个路由数组，其中路由对象包括路由路径（path）和路由对应的组件（component），因为我们网站打开后，会进入用户管理界面。导航到首页时，需要直接跳转到用户路由。首页路由（''）没有对应的组件，直接跳转到users路由。path:'**'路由的作用是在没有找到路由的情况下访问PageNotFoundComponent组件。定义好路由数组后，导入带有@NgModule装饰器的RouterModule，将路由数组传递给RouterModule的forRoot数组。最后导出RouterModule模块。