app.component.css

.us{color: red;
}
.active{color: aquamarine;
}

 app.component.js

<div style="text-align:center"><h1>welcome to {{title}}</h1><div style="color:#f00000">我是歌谣</div><div>{{name}}</div><ul class="us"><li *ngFor="let na of names">{{na}}</li></ul>
</div><!--1载入-->
<router-outlet></router-outlet>
<a href="#" routerLinkActive="active" [routerLink]="['/demo']">demo</a>
<a href="#" routerLinkActive="active" [routerLink]="['/child']">child</a>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { Test1Component } from './test1/test1.component';
import {FormsModule} from '@angular/forms';
import { Test2Component } from './test2/test2.component';
import { ChildComponent } from './child/child.component';
import { DemoComponent } from './demo/demo.component';
import {RouterConfigModule} from "./router/router.module";@NgModule({declarations: [AppComponent,ChildComponent,DemoComponent],imports: [BrowserModule,AppRoutingModule,FormsModule,RouterConfigModule],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }

运行结果