前端学习（2329）：angular之路由

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 { }

运行结果