Angular2 如何从另一个组件调用点击事件上的函数

Question

我有两个组件：Menu1and2和Menu3

这是我的 Menu1and2.component.html

<form id="form1" runat="server" class="mainMenuContainer">
    <div class="col-lg-12" id="menuContainer" *ngFor="let menu of usermenus">
        <div class="panel panel-default col-lg-6 col-md-6 col-sm-12">
            <div class="panel-heading">{{menu.Title}}</div>
            <div class="panel-body">
                <ul class="sub" style="display: block;" *ngFor="let subMenu of menu.SubMenus">
                    <li><a href="#" (click)="getSubMenu(subMenu.Title)>{{subMenu.Title}}</a></li>
                 </ul>
            </div>
        </div>
    </div>
</form>

它有一个单击事件，该事件调用 Menu3.component.ts 中的函数，该函数检索应在 Menu3.component 中显示的数据.html

如何使 Menu3 的功能仅在单击菜单 1 和 2 的点击事件时执行？

Answer 1

Er.我认为你走错了解决方案。

我有一个使用事件调度和其他 linster 来处理事件的解决方案。它在 Angular2(2.4.10( 中对我来说效果很好

@angular/cli: 1.0.0
node: 7.2.0
os: darwin x64
@angular/common: 2.4.10
@angular/compiler: 2.4.10
@angular/core: 2.4.10
@angular/forms: 2.4.10
@angular/http: 2.4.10
@angular/platform-browser: 2.4.10
@angular/platform-browser-dynamic: 2.4.10
@angular/router: 3.4.10
@angular/cli: 1.0.0
@angular/compiler-cli: 2.4.10

代码：事件服务

import {Injectable, EventEmitter} from "@angular/core";
import {DefinedEvent} from "../domain/DefinedEvent";
import {LoggerService} from "./LoggerService";
@Injectable()
export class EventService {
  private $event: EventEmitter<DefinedEvent>;

  constructor(private loggerService: LoggerService) {
      this.$event = new EventEmitter();
  }
  public trigger(type: string, value: any) {
        this.loggerService.debug("event has been triggered with type:" + type);
        this.$event.emit(new DefinedEvent(type, value));
  }
  public on(type: string, callback: Function): void {
        this.$event.subscribe((item) => {
            if (item.type === type && !!callback) {
                callback.apply(null, [item])
            }
        });
    }
 }

代码：定义事件

export class DefinedEvent {
  readonly type: string;
  readonly value: any;
  readonly time: Date;
  constructor(type: string, value: any) {
    this.type = type;
    this.value = value;
    this.time = new Date();
  }
}

以及如何使用

1.在@NgModule中声明为提供者

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
  ],
  providers: [
    ...
    EventService
    ...
  ],
  bootstrap: []
})

2.添加事件处理程序

this.eventService.on("gologin", (item) => {
    console.log(item);
});

3.调度事件

this.eventService.trigger("gologin", {})

4.So，你可以在任何可以获得eventService实例的地方使用它。

警告。记得！！！将事件服务的实例保留为应用中的单例