anglejs4の別のコンポーネントのクリックイベント機能をトリガーする方法

Question

私のangularjsプロジェクトでは、htmlからのクリックに関する問題に直面しています。 を次のように私のコードモジュールには、私はクリックイベントを追加した私は、ヘッダモジュールおよび認証モジュールheader.component.htmlで

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

@Component({ 
selector: 'layout-header', 
templateUrl: './header.component.html' 
}) 
export class HeaderComponent { 
constructor() {} 

} 

を持っている私の意図は、他のコンポーネント クリックコードから関数を呼び出すことです続くように私はheader.component.tsに同じ「clickLogout」を追加した場合 を呼び出すdoes'nt場合

<ul> 
    <li class="nav-item"><a class="nav-link" (click)="clickLogout($event)" routerLinkActive="active"> Logout </a> </li> 
</ul> 

「clickLogout」機能は、他のコンポーネントに追加され、それが動作します。

しかし、私は別のコンポーネントにそれを必要とするいくつかの理由で、だから、ビューから他の構成要素のクリックをトリガする任意のオプションがあります：（クリック）=「clickLogout（$イベント）」

私はangularjs4、誰かを使用していますご意見をお聞かせください！

app 
--auth 
----auth-logout.component.ts 
--shared 
----layout 
-------header.component.ts 
-------header.component.html 

を次のように

ディレクトリ構造がある私は、AUTH-logout.component.ts

Answer 1

上のクリックコールあなたがそうするように共有サービスを必要とする必要があります。

import { Injectable } from '@angular/core'; 
import { Observable } from 'rxjs'; 
import { Subject } from 'rxjs/Subject'; 

@Injectable() 
export class MessageService { 
    private subject = new Subject<any>(); 

    logout() { 
     this.subject.next({ text: 'logout'}); 
    } 

    getMessage(): Observable<any> { 
     return this.subject.asObservable(); 
    } 

} 

をし、ヘッダコンポーネント内：

import { Component } from '@angular/core'; 
import { MessageService} from 'service/MessageService'; //import service here as per your directory 
@Component({ 
    selector: 'layout-header', 
    templateUrl: './header.component.html' 
}) 
export class HeaderComponent { 
    constructor(private messageService: MessageService) {} 
    clickLogout(): void { 
    // send message to subscribers via observable subject 
    this.messageService.logout(); 
    } 
} 

そしてほかのコンポーネントEDITで：hereから取ら

import { Component } from '@angular/core'; 
import { Subscription } from 'rxjs/Subscription'; //Edit 
import { MessageService} from 'service/MessageService'; //import service here as per your directory 
@Component({ 
     selector: 'another-component', 
     templateUrl: './another.component.html' 
    }) 
    export class AnotherComponent { 
     constructor(private messageService: MessageService) { 
    // subscribe to home component messages 
      this.messageService.getMessage().subscribe(message => { 
       //do your logout stuff here 
      }); 
     } 

     ngOnDestroy() { 
     // unsubscribe to ensure no memory leaks 
     this.subscription.unsubscribe(); 
     } 

    } 

リファレンス。