代码之家 › 专栏 › 技术社区 › Ajith

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

angular-components angularjs-ng-click angular-directive angular

Ajith · 技术社区 · 7 年前

我有一个头模块和一个身份验证模块

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

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

}

点击代码如下

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

如果没有调用,则在其他组件上添加“clickLogout”功能如果我在标题中添加相同的“clickLogout”。组成部分ts,它起作用了。

但由于某些原因,我需要在另一个组件上使用它,那么是否有任何选项可以从视图中触发对其他组件的单击:(click)=“clickLogout($event)”

目录结构如下

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

1 回复 | 直到 7 年前

user1608841 7 年前

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 .

推荐文章

Ali · 获取由ng repeat | Angular js填充的输入的编辑值

7 年前

Dave · 单击ng无法打开md菜单

7 年前

Father-Empire · 角度ng click=“function()”不触发,但(click)=“function()”触发

7 年前

ronit · 嵌套ng click参数未定义

7 年前

Crystal · 如何启动按钮单击,根据视图上的控制器执行不同的操作?

7 年前

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

7 年前

user1449456 · ng if='false'隐藏DIV

7 年前

Sachin HR · Angularjs将id传递到模态函数()

7 年前

N.Car · AngularJS-带有ng点击的ui路由无法正常工作

7 年前

Olafvv · AngularJS:ng单击时值更改时,ng更改不起作用

7 年前