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

運行結果

總結

以上是生活随笔為你收集整理的前端学习（2331）：angular之图片的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。