如何在angularjs4中触发另一个组件的点击事件功能

Posted 2023-02-22

【中文标题】如何在angularjs4中触发另一个组件的点击事件功能

【英文标题】：How to trigger a click event function of another component in angularjs4

【发布时间】：2018-03-01 08:34:42

【问题描述】：

在我的 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”功能添加到其他组件上，如果没有调用 如果我在 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 上的点击调用

【问题讨论】：

你想从哪个组件调用它？这两个控制器有父子关系吗？还是他们只是兄弟姐妹？

没有父子关系，只有兄弟姐妹。我需要从标题组件模板中单击以调用另一个与标题组件无关的组件函数

我也添加了目录结构

请参考以下答案

【参考方案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();
      

    

参考来自here。

【讨论】：

当我单击标头组件中的注销按钮 clickLogout() 成功调用 => 然后成功调用 MessageService 的注销功能 => 但最后 this.logoutService.getMessage().subscribe(message => );在 AnotherComponent 中没有调用

在订阅中添加console.log...它是否打印了一些东西？实际上一旦注销方法被触发； subscribe 方法会自动被调用。

我假设另一个组件正确吗？

您是否在另一个组件中导入了注销服务？控制台有什么错误吗？

点击来自标题组件模板，另一个组件在订阅中没有任何视图和console.log...不打印