在 Angular2 中使用路由器（路由器出口）实现“主 - 详细信息”

Question

我正在使用 Angular2 路由器实现主从屏幕。 我有一个组件，它在其模板中定义了一个资源列表（ul/li 格式）：Master part。列表中的每个资源都可以通过“routerLink”绑定单击。

在同一个模板中，我定义了一个路由器插座。这个想法是：当我单击列表中的一个资源 (ul/li) 时，Angular2 应该在路由器出口处显示/呈现一个可编辑的表单。我可以更改数据并按保存按钮。 （细节部分）

当这个资源被更新（保存）时，我希望资源列表（ul/li）也被更新，因为可能有一些数据已经改变，它也显示在资源列表中（例如资源显示名称） .

由于 Angular2 正在管理细节组件，我没有在我的 html 模板中声明该组件。但是，因为我没有声明细节组件，所以我没有对事件做出反应的钩子（比如更改事件）。也就是说，当我的表单成功更改时，我会发出一个“更改事件”。基于这样的事件，我可以在“主控部分”实现一个处理程序，以便主控可以通过刷新资源列表 (ul/li) 来更新自己。

关键是：由于在我的应用中引入了 Angular2 路由器功能，我失去了主组件和详细组件之间的关系。

问题：有没有办法解决这种模式？

Answer 1

理想的方式是使用，Component communication via a service

你也可以试试下面，

import { Component , Output, EventEmitter} from '@angular/core';

@Component({
  selector: 'my-app',
  template: `Angular Route
   <hr />
    <a routerLink="/child1" >Child 1</a>
    <a routerLink="/child2" >Child 2</a>
  <hr />
     Inside Parent component
     <br />
     <br />
     Subscription from child : {{result | json}}
  <hr />
  <div> Child Component</div>
  <br />
  <router-outlet
  (activate)='onActivate($event)'
  (deactivate)='onDeactivate($event)'></router-outlet>
  `
})
export class AppComponent {
  result: any = {};

  constructor(){
  }

  childSubscription: any;

  onActivate($event){
     if(!!$event['parentNotifier']){
       this.childSubscription = $event['parentNotifier'].subscribe(res => {
          this.result = res;
       });
     }
  }

  onDeactivate($event){
    if(!!this.childSubscription){
      this.childSubscription.unsubscribe();
    }
  }
}

@Component({
  selector: 'my-app',
  template: `I am a child
  <button (click)='clickMe()' >Click me to notify parent</button>
  `
})
export class ChildComponent1 {
   @Output() parentNotifier:EventEmitter<any> = new EventEmitter<any>();

   clickMe(){
     this.parentNotifier.next('I am coming from child 1!!');
   }
}

@Component({
  selector: 'my-app',
  template: `I am a child
  <button (click)='clickMe()' >Click me to notify parent</button>
  `
})
export class ChildComponent2 {
   @Output() parentNotifier:EventEmitter<any> = new EventEmitter<any>();

   clickMe(){
     this.parentNotifier.next('I am coming from child 2!!');
   }
}

但请注意，事件的名称需要父母知道，就像在上面的示例中一样，我直接使用了它parentNotifier。

这里是Plunker！！

希望这会有所帮助！