Question

我正在尝试将两个变量从父组件发送到子组件。为此，我已经在一个对象中初始化了这两个数据，您可以在下面看到

export class AppComponent {
  title = 'app';
  myObj = {
    FirstInputString : 'Hello I am coming from Parent',
    SecondInputString :  'I am second value coming from parent'
  };

我已将子选择器放置到父组件视图.html文件中，在该文件中，我使用了@input名称myInput将其绑定到对象名称。

<app-form-test [myInput]='myObj' (myOutput)="getData($event)"></app-form-test>

但是在子组件中，当我使用对象值..我是无法访问父级中已定义对象的键值对象

export class FormTestComponent implements OnInit {
  @Input() myInput: string;

  ngOnInit() {
    console.log(this.myInput.FirstInputString);
    console.log(this.myInput.SecondInputString);
  }
}

Answer 1

应用组件

export class AppComponent {
  title = 'app';
  myObj = {
    FirstInputString : 'Hello I am coming from Parent',
    SecondInputString :  'I am second value coming from parent'
  };

应用程序组件html

<app-form-test [myInput]="myObj" (myOutput)="getData($event)"></app-form-test>

表单测试组件

export class FormTestComponent implements OnInit {
  @Input() myInput: any;

  ngOnInit() {
    console.log(this.myInput.FirstInputString);
    console.log(this.myInput.SecondInputString);
  }
}

以上对我来说很好用。

注意：myInput：字符串我将其更改为myInput：any，尽管在运行时不会引起任何错误。

请找到stackblitz https://stackblitz.com/edit/angular-8skzfj?file=src%2Fapp%2Fheader%2Fheader.component.ts

在Angular中将多个数据从父组件传递到子组件时遇到错误

1 个答案: