あるコンポーネントの機能を別のコンポーネントから呼び出す適切な方法

Question

私は2つのコンポーネントを持っています。 1は成分2

@Component({ 
selector: 'app-contextualmenu', 
templateUrl: './contextualmenu.component.html', 
styleUrls: ['./contextualmenu.component.scss'] 
}) 
export class ContextualMenuComponent implements OnInit { 
context: string;  

constructor(private ctxMenu: ContextualMenuSyncService,) { 
    ctxMenu.context$.subscribe(v => { this.context = v; }); 
} 

ngOnInit() {} 

add() { 
    this.ctxMenu.add(); 
} 
} 

関数を呼び出す少しFABメニューアイコン事が

@Component({ 
selector: 'app-sites', 
templateUrl: './sites.component.html', 
styleUrls: ['./sites.component.scss'] 
}) 
export class SitesComponent implements OnInit { 
list: Site[]; 

constructor(private ctxMenu: ContextualMenuSyncService) { 
    this.ctxMenu.sync("sites"); 
    this.ctxMenu.add = this.add; 
} 

ngOnInit() { } 

add() {  
    this.router.navigateByUrl("/newsite"); 
} 
} 

呼び出される関数が最後にあるている成分である

コンポーネントContextualMenuSyncServiceは、2つのコンポーネント間のコンジットとして機能します。私は、上記のように共有サービスが適切であるこのトピックで読んだものによるとコンポーネント1

のadd()からコンポーネント2のadd()を呼び出すようにしようとしています一言で言えばそう

@Injectable() 
export class ContextualMenuSyncService { 
private context = new Subject<string>(); 
context$ = this.context.asObservable(); 

add: Function; 

constructor() { } 

sync(value: string) { 
    this.context.next(value); 
} 
} 

コンポーネント間の通信を実現する方法です。

私の問題は、私がadd()と呼ぶとContextualMenuSyncServiceコンテキストから実行されているということです。 thisを意味することはContextualMenuSyncServiceとされていないあなたは、コンポーネントのメンバ関数を呼び出すにはどうすればよいSitesComponent（コンポーネント2）など私はSitesComponent（コンポーネント2）のメンバー、注入し、情報へのアクセスを持っていないことを意味し、

最初のコンポーネントのコンテキスト内の別のコンポーネントから

Answer 1

thisの値をaddに明示的にバインドして、コンポーネント2のthisの値を取得する必要があります。そここれを行うにはいくつかの方法がありますが、最も簡単で、最も人気のある間ctxMenuにaddを追加するときに同じよう矢印機能を使用することです：

this.ctxMenu.add =() => this.add(); // maintains Component2's this 

を別の方法として、あなたはそうのようなbindを使用することができます。

this.ctxMenu.add = this.add.bind(this); // maintains Component2's this 

Answer 2

あなたはもっとこのようにそれを行うだろう：関数が実行されている

コンポーネント：

@Component({ 
selector: 'app-sites', 
templateUrl: './sites.component.html', 
styleUrls: ['./sites.component.scss'] 
}) 
export class SitesComponent implements OnInit, OnDestroy { 
list: Site[]; 
private addSub; 

constructor(private ctxMenu: ContextualMenuSyncService) { 
    this.ctxMenu.sync("sites"); 
    this.addSub = this.ctxMenu.add$.subscribe(() => this.add()); 
} 

ngOnInit() { } 

ngOnDestroy() { this.addSub.unsubscribe(); } // always unsubscribe 

add() {  
    this.router.navigateByUrl("/newsite"); 
} 
} 

サービス：

@Injectable() 
export class ContextualMenuSyncService { 
private context = new Subject<string>(); 
context$ = this.context.asObservable(); 

private addSource: Subject<any> = new Subject(); 
add$: Observable<any> = this.addSource.asObservable(); 
add() { 
    this.addSource.next(); 
} 

constructor() { } 

sync(value: string) { 
    this.context.next(value); 
} 
} 

サービスを呼び出す関数は結構です。