呼叫功能的組件的輸入

Question

所以我有一個組件，它看起來是這樣的：

export class TAComponent implements OnInit { 
    @Input() postInfo : TracklistPost; 
    youtubeUrlOriginal : string; 

    ngOnInit() : void { 
     this.youtubeUrlOriginal = this.postInfo.getYoutubeUrl(); 
    } 
} 

和類：

export class TracklistPost { 
    play_urls  : PlayUrl[]; 

    public getYoutubeUrl() : string { 
     return this.play_urls[1].value; 
    } 
} 

當我打電話從TAComponent的getYoutubeUrl（）函數，我得到這個函數沒有定義的錯誤。在Angular2中如何做到這一點？

Answer 1

兩個組件創建一個共同的服務，在服務中添加getYoutubeUrl（），並使用該服務在這兩個組件

import { Injectable } from '@angular/core'; 
export class CommService { 


    play_urls  : PlayUrl[]; 
    constructor() { 
    } 

    public getYoutubeUrl() : string { 
     return this.play_urls[1].value; 
    } 
} 

現在，在這兩個部件的母公司注入該服務並使用此服務如下圖所示

export class TAComponent implements OnInit { 
    @Input() postInfo : TracklistPost; 
    youtubeUrlOriginal : string; 

    constructor(public commService : CommService) { } 

    ngOnInit() : void { 
     this.youtubeUrlOriginal = this.commService.getYoutubeUrl(); 
    } 

}