Question

在我的angularjs项目中，我遇到了来自html的点击问题。我的代码模块如下我有一个标题模块和一个auth模块

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

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

}

在header.component.html中我添加了一个click事件，我的目的是从其他组件调用一个函数点击代码如下

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

＆＃34; clickLogout＆＃34;如果不调用，则在其他组件上添加功能如果我添加相同的＆＃34; clickLogout＆＃34;在header.component.ts中，它可以工作。

但由于某种原因，我需要在另一个组件上，所以是否有任何选项可以从视图中触发其他组件的点击:(点击）=＆＃34; clickLogout（$ event）＆＃34;

我正在使用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();
      }

    }

摘自here。

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

1 个答案: