Question

嵌套组件如何在Angular 2中相互通信？

将@Parent()添加到任何级别的构造函数会破坏应用程序。

鉴于以下代码，我如何从每个级别的GrandParent，Parent，Child和GrandChild中获取message？

/客户端/祖父母

import {Component, View, bootstrap} from 'angular2/angular2';
import {ParentCmp} from 'client/parent';
import {ChildCmp} from 'client/child';
import {GrandChildCmp} from 'client/grandchild';

@Component({
  selector: 'grand-parent'
})
@View({
  template: `
  <div style="background-color: lightgreen; padding: 10px;">
    <h1>Grand-Parent</h1>
    <p>Parent: {{parentMessage}}</p>
    <p>Child: {{childMessage}}</p>
    <p>Grand-Child: {{grandChildMessage}}</p>

    <parent></parent>
  </div>
  `,
  directives: [ParentCmp]
})
class GrandParent {
  message:string;
  parentMessage:string;
  childMessage: string;
  grandChildMessage: string;

  constructor() {
    this.message = "message from grandparent";
    //this.parentMessage = parent.message;
    //this.childMessage = child.message;
    //this.grandChildMessage = grandChild.message;
  }
}

bootstrap(GrandParent);

/客户端/父

import {Component, View, Parent} from 'angular2/angular2';
import {GrandParentCmp} from 'client/grandparent';
import {ChildCmp} from 'client/child';
import {GrandChildCmp} from 'client/grandchild';

@Component({
  selector: 'parent'
})
@View({
  template: `
  <div style="background-color: lightblue; padding: 10px;">
    <p>Grand-Parent: {{grandParentMessage}}</p>
    <h1>Parent</h1>
    <p>Child: {{childMessage}}</p>
    <p>Grand-Child: {{grandChildMessage}}</p>

    <child></child>
  </div>
  `,
  directives: [ChildCmp]
})
export class ParentCmp {
  message:string;
  grandParentMessage:string;
  childMessage:string;
  grandChildMessage:string;

  constructor() {
    this.message = "message from parent";
    //this.grandParentMessage = grandParent.message;
    //this.childMessage = child.message;
    //this.grandChildMessage = grandChild.message;

  }
}

/客户端/子

import {Component, View, Host} from 'angular2/angular2';
import {GrandParentCmp} from 'client/grandparent';
import {ParentCmp} from 'client/parent';
import {GrandChildCmp} from 'client/grandchild';

@Component({
  selector: 'child'
})
@View({
  template: `
  <div style="background-color: orange; padding: 10px;">
    <p>GrandParent: {{grandParentMessage}}</p>
    <p>Parent: {{parentMessage}}</p>
    <h1>Child</h1>
    <p>Grand-Child: {{grandChildMessage}}</p>

    <grand-child></grand-child>
  </div>
  `,
  directives: [GrandChildCmp]
})
export class ChildCmp {
  message:string;
  grandParentMessage:string;
  parentMessage:string;
  grandChildMessage:string;

  constructor() {
    this.message = "message from child";
    //this.grandParentMessage = grandParent.message;
    //this.parentMessage = parent.message;
    //this.grandChildMessage = grandChild.message;
  }
}

/客户端/孙子

import {Component, View, Host} from 'angular2/angular2';
import {GrandParentCmp} from 'client/grandparent';
import {ParentCmp} from 'client/parent';
import {ChildCmp} from 'client/child';

@Component({
  selector: 'grand-child'
})
@View({
  template: `
  <div style="background-color: lightgrey; padding: 10px;">
    <p>Grand-Parent: {{grandParentMessage}}</p>
    <p>Parent: {{parentMessage}}</p>
    <p>Child</p>
    <h1>Grand-Child: {{grandChildMessage}}</h1>

    <child></child>
  </div>
  `
})
export class GrandChildCmp {
  message:string;
  grandParentMessage:string;
  parentMessage:string;
  grandChildMessage:string;

  constructor() {
    this.message = "message from grandchild";
    //this.grandParentMessage = grandParent.message;
    //this.parentMessage = parent.message;
    //this.grandChildMessage = grandChild.message;
  }
}

我已添加了Github Repo的链接。

Angular2中的亲子沟通

0 个答案: