Question

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

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

当更新（保存）此资源时，我希望更新资源列表（ul / li），因为某些数据可能已更改，这也会显示在资源列表中（例如资源显示名称）

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

重点是：由于在我的应用程序中引入了Angular2路由器功能，我已经失去了master和detail组件之间的关系。

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

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 !!

希望这会有所帮助!!

在Angular2中使用路由器（路由器插座）实现“Master - detail”

1 个答案: