Question

如何在不使用输入和输出的情况下更改变量的值或在子组件中使用父组件中的方法

我尝试这样的事情，但没有工作。

@Component({
  selector: 'child',
  template: `
    <div>
      <h2>{{name}}</h2>
      <button (click) = "rename()" > Rename Parent </button>
    </div>
  `,
})
export class Child {
  name:string;
  constructor() {
    this.name = 'child'
  }

  rename() {
    App.name = 'Rename';
  }

}

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
    </div>
    <child> </child>
  `,
})
export class App {
  name:string;
  constructor() {
    this.name = 'Angular2'
  }
}

这里的例子

plunker example

Answer 1

输入和输出就是这样做的。根据Angular2文档，它是用于父组件和子组件之间的通信。

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
    </div>
    <child [name]="this.name" (nameChanged)="this.name = $event"> </child>
  `,
})
export class App {
  name:string;
  constructor() {
    this.name = 'Angular2'
  }
}

@Component({
  selector: 'child',
  template: `
    <div>
      <h2>{{name}}</h2>
      <button (click) = "rename()" > Rename Parent </button>
    </div>
  `,
})
export class Child {

@Input() name:string;
@Output() nameChanged: EventEmitter<string> = new EventEmitter<string>();

  constructor() {
  }

  rename() {
    this.nameChanged.emit('Renamed');
  }

}

或者，您可以将服务注入父组件和子组件，该组件具有父级和子级都可以访问和修改的一些值。但请确保将该服务仅添加到父组件或仅添加到AppModule，否则您将获得2个服务实例。

Answer 2

这是Angular 2中的@Output和@Input。文档：https://angular.io/docs/ts/latest/cookbook/component-communication.html

另一种方式是Observable，Subject您也可以将子组件中的数据注入根组件或从组件注入另一组件：请参阅此视频：https://www.youtube.com/watch?v=U2qJxfi7370&list=PLFaW_8zE4amNEdKZOJD3P_GeV3Hgva7RD&index=10

angular 2 child将变量引用到parent中

2 个答案: