无法在组件之间传递数据

Question

我们正在尝试将数组数据从父组件传递给子组件，它正在抛出 TypeError: Cannot read property 'setData' of undefined> 下面是我们正在尝试的

父组件

export class RFComponent implements DoCheck {

  finalResult: SModel[];

  @ViewChild(TSFComponent, {static: false})
  private childVar: TSFComponent;

  ........
  click() {
  this.elem = this.getResult(this.prj);
  this.childVar.setData(this.finalResult);
  }

子组件

export class TSFComponent implements DoCheck {

  @Input() setData(e: SModel[]) {
    this.tjlData = e;
  }

我不确定为什么我们在从父级调用 setData() 时收到 Cannot read property 错误

Answer 1

请重新检查您的 RFComponent。在那里你会看到 this.finalResult 没有在任何地方定义。您需要将其定义为成员变量，例如

private finalResult: string = 'something'

然后你就可以将它传递给其他组件了。

但是，这也不是最佳做法。据我在这里看到你没有正确定义你的组件。即使您可以在 Angular 中使用纯 classes，通常组件在 class 声明上有一个装饰器，您可以在其中定义选择器、templateUrl 和样式，例如

@Component({
    selector: 'some-selector',
    templateUrl: 'my-template.component.html',
    styleUrls: ['my-style.component.scss']
})

在那里，您可以在模板中引用其他 class 并通过 @Input()、@Output() 参数传递数据。

Answer 2

您不需要将子项上的 setData() 定义为 Input()。当您使用 viewchild 时，您正在创建对子组件的引用，因此您可以访问其上的方法。您没有将方法 setData 从父级传递给子级。

export class TSFComponent implements DoCheck {

  setData(e: SModel[]) {
    this.tjlData = e;
  }

您还需要在子视图中引用 dom 元素。

<child #TSFComponent></child>

@ViewChild('TSFComponent', {static: false}) childVar: TSFComponent;

Answer 3

据我所知，您不需要 Input() 装饰器，如果您删除它，它应该可以工作。前提是，如前所述，TSFComponent实际上是在RFComponent的模板中使用的。

Answer 4

你用错了@ViewChild。您实际上不需要使用 setData() 函数 'set' 数据。如果在子组件中使用 @Input() 装饰器，则可以使用从父组件传递下来的数据设置并声明变量。

你可以这样做：

父组件HTML:

<child-component [parentData]="data"></child-component>

子组件.ts

@Input data: any;

然后，如果要设置一个变量或对象等于子组件variable/object，那么在父组件中引用子组件变量并赋值。见下文：

子组件对象 -> 父组件对象

给数据对象一个新值的子组件

someCode() {
    data = {
        someData: "Hi there",
        someMoreData: "Hello there again"
    }

父组件引用并关联新对象

parentData: any; 

assignData {
    this.childComponent.data = parentData;
}

无法在组件之间传递数据

Unable to pass data between components

javascript

typescript

angular

angular7

子组件对象 -> 父组件对象