Angular之特性模塊 ( Feature Module )

項目結構

一 創建特性模塊，及其包含的組件、服務。

ng g module art
ng g component art/music
ng g component art/dance
ng g service art/performance

 

二 特性模塊

art.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MusicComponent } from './music/music.component';
import { DanceComponent } from './dance/dance.component';
import { PerformanceService } from './performance.service';

@NgModule({
  imports: [
    CommonModule
  ],
  // 把特性模塊和組件關聯起來：添加專屬於這個模塊的可聲明對象（組件、指令和管道）
  declarations: [MusicComponent, DanceComponent],
  // 導出組件：導入特性模塊后，就可以使用其中包含的組件模版了
  exports: [
    MusicComponent,
    DanceComponent
  ],
  providers: [
    PerformanceService
  ]
})
export class ArtModule { }

 

三 組件

music.component.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-music',
  templateUrl: './music.component.html',
  styleUrls: ['./music.component.css']
})
export class MusicComponent implements OnInit {

  @Input()
  name: string;

  constructor() { }

  ngOnInit() {
  }

}

 

music.component.html

<p>
  music works!{{name}}
</p>

 

dance.component.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-dance',
  templateUrl: './dance.component.html',
  styleUrls: ['./dance.component.css']
})
export class DanceComponent implements OnInit {

  @Input()
  name: string;

  constructor() { }

  ngOnInit() {
  }

}

 

dance.component.html

<p>
  dance works!{{name}}
</p>

 

四 服務

performance.service.ts

import { Injectable } from '@angular/core';

@Injectable()
export class PerformanceService {

  constructor() { }

  perform(): string[] {
    return ['唱歌', '跳舞'];
  }
}

 

五 導入特性模塊

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import { ArtModule } from './art/art.module';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ArtModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

六 使用特性模塊的組件、服務

app.component.ts

import { Component } from '@angular/core';
import { PerformanceService } from './art/performance.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  
  constructor(public performance: PerformanceService) {

  }
  perform() {
    console.log(this.performance.perform());
  }
}

 

app.component.html

<p>
  app works!
</p>
<!-- 單向綁定：組件的屬性 -->
<app-music [name]="'水邊的阿狄麗娜'"></app-music>
<!-- 單向綁定：值是固定的，故使用一次性綁定 ( a "one-time" binding ) -->
<app-dance name="踢踏舞"></app-dance>
<button type="button" (click)="perform();">演出</button>

 

七 運行效果