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" 功能添加到其他组件 any if 不调用如果我在 header.component.ts 中添加相同的 "clickLogout"，它会起作用。

但出于某种原因我需要在另一个组件上使用它，那么是否有任何选项可以触发从视图中点击其他组件：(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();
    }

}

并在 header 组件中：

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

    }

引用自here。

angularjs4中如何触发另一个组件的点击事件函数

How to trigger a click event function of another component in angularjs4

angular

angular-directive

angularjs-ng-click

angular-components