Angular 2 - 如何在沒有模板的情況下收聽事件？

Question

問題

通常，在Angular 2中，可以通過以下語法監聽事件：

<my-elem (customEvent)="customEventProcessor"></my-elem>

但是當我使用路由器時，該主機 - <my-elem> - 在任何模板中都不存在。 相反，有一個<router-outlet> ，我的組件在導航時加載。 因此，我的問題的關鍵是， 如何在不依賴模板的情況下強制我的主機聽我的自定義事件？

可選細節

假設我有一些元素list-view ，它是我的根組件的子元素。 list-view通過常規語法偵聽自定義事件：

<list-view (customEvent)="customEventProcessor()"></list-view>

為了完整起見，發出事件的list-view組件也具有可預測的結構：

<button (click)="onDetailsClick(propertyOfInterest)">Click here</button>

list-view通過觀察將事件發送到父級。

class ListView {

    ...

        public onDetailsClick(property: string): void {

            this.customEvent.next({ value: property });

        }

}

並且該事件觸發customEventProcessor()函數。 到現在為止還挺好。 但是，當我使用路由器來控制是否存在list-view ，我不能（據我所知）插入命令來監視某些事件。

我不確定處理這種情況的最佳方法是什么。

Answer 1

此問題尚未解決（請參閱此github問題 ）。 這是目前可能的解決方案之一（見本文 ）：

@Component({
  selector: 'my-app',
  directives: [RouterOutlet, RouterLink],
  template: `
    <h1>{{ message }}</h1>
    <a [router-link]="['./MyElem1']">MyElem1</a>
    <a [router-link]="['./MyElem2']">MyElem2</a>
    <router-outlet></router-outlet>
  `
})
@RouteConfig([
  { path: '/', redirectTo: '/my-elem1' },
  { path: '/my-elem1', name: 'MyElem1', component: MyElem1 },
  { path: '/my-elem2', name: 'MyElem2', component: MyElem2 },
])
export class App {
  message: string = 'Click on the button';

  @ViewChild(MyElem1) myElem1: MyElem1;
  @ViewChild(MyElem2) myElem2: MyElem2;

  constructor(router: Router) {
    let subs = null;
    router.subscribe(() => {
      if (subs) { subs.unsubscribe(); subs = null; }

      if (this.myElem1) {
        subs = this.myElem1.customEvent1.subscribe(m=>this.processCustomEvent(m));
      }
      if (this.myElem2) {
        subs = this.myElem2.customEvent2.subscribe(m=>this.processCustomEvent(m));
      }
    });
  }

  processCustomEvent(message) { this.message = message }
}