使用service，可以更容易讓component之間互動。

如何定義服務Service

  1. 新增服務的typescript檔案

命名為hero.service.ts，這個service將會收到log字串，並顯示出內容。

1
2
3
4
5
export class HeroService {
    heroLog(log: string) {
        console.log(log);
    }
}
  1. 在其他component使用HeroService

用providers的語法，將這個service提供給Angular依賴注入系統；並用constructor語法來注入service

1
2
3
4
5
6
7
8
9
10
@Component({
    ...,
    providers: [HeroService]
})
export class NewLogComponent {
    constructor(private heroService: HeroService) {}

    <!-- 這裡的log是component原有的資料傳入 -->
    this.heroService.heroLog(log);
}

在service當中使用其他service

使用@Injectable()語法，加在要使用其他service的service。
舉例來說，HeroService當中使用TestService，就在HeroService加上@Injectable：

1
2
3
4
5
6
7
8
9
10
@Injectable()
export class HeroService {
    <!-- 同樣需要注入service -->
    constructor(private testService: TestService);

    addTest() {
        <!-- 使用service的function -->
        this.testService.doTest();
    }
}

service的使用

  1. 將資料傳給component使用

service的資料和function：

1
2
3
4
5
6
7
export class HeroService {
    private data = ['one', 'two'];

    getData() {
        return this.data.slice();
    }
}

component拿資料並render到html：

1
2
3
4
5
6
7
export class ChildComponent implments OnInit {
    childData;
    constructor(private heroService: HeroService);
    ngOnInit() {
        this.childData = this.heroService.getData();
    }
}