Как вызвать функцию события клика другого компонента в angularjs4

Question

В моем проекте angularjs я столкнулся с проблемой щелчка мышью из HTML. Мой модуль кода выглядит следующим образом: у меня есть модуль заголовка и модуль аутентификации

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

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

}

В header.component.html я добавил событие щелчка, я хочу вызвать функцию из кода щелчка другого компонента, как показано ниже.

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

Функция "clickLogout" добавляется к другому компоненту, если не вызывается. Если я добавлю тот же "clickLogout" в header.component.ts, он будет работать.

Но по какой-то причине он мне нужен для другого компонента, поэтому есть ли возможность вызвать щелчок другого компонента из вида: (click)="clickLogout($event)"

Я использую 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();
  }
}

И в любой другой компонент РЕДАКТИРОВАТЬ:

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();
      }

    }

Ссылка взята отсюда.