如何将选择器标签之间的数据从一个组件传递到另一个组件

【问题标题】：How to pass data between selector tags from one component to other如何将选择器标签之间的数据从一个组件传递到另一个组件
【发布时间】：2018-06-01 23:07:02
【问题描述】：

我有 2 个组件，

组件 A：

<app-selector [test]="title"></app-selector>
export class AssignerComponent implements OnInit {
    title:any = 'get';
    constructor() {}
 }

组件 B：

export class SelectorComponent implements OnInit {
@Input() test:any;
    constructor() {
        console.log(this.test)
    }
}

但无法从 A 获取组件 B 中 test 的值。它是未定义的。谁能给我建议帮助。谢谢。

【问题讨论】：

angular.io/guide/component-interaction

标签： angular angular-cli angular2-directives

【解决方案1】：

这是通过test 输入将数据从组件A 传递到组件B 的正确方法。但是，您看到undefined 的值是this.test，因为您正试图将它从constructor 记录到控制台，这是在它被设置为您传递的值之前。

如果将 console.log(this.test) 语句移至 ngOnInit 方法，您将看到所需的行为：

  Component B:
  export class SelectorComponent implements OnInit {
    @Input() test:any;
    constructor() {}
    ngOnInit() {
      console.log(this.test);
    }
  }

这里有更多关于生命周期钩子和 Angular 组件创建方式的信息：https://angular.io/guide/lifecycle-hooks

【讨论】：