如何将任何数组从普通 html 页面传递到 Angular Web 组件答案

【问题标题】：How to pass any array from normal html page to an angular web component如何将任何数组从普通 html 页面传递到 Angular Web 组件
【发布时间】：2020-05-05 03:41:51
【问题描述】：

我在一个普通的 html 页面中集成了一个有角度的 web 组件。我想将我的 html 页面中的一组数据传递给我的 Web 组件。

    <script>
window.onload = function() {
  var myArray = [{value: 'aa', name: 'aaa'}, {value: 'bb', name:'bbb'}];
};</script>

现在我想将“myArray”传递给我的 Angular Web 组件。

我已经这样做了。 <someComponent [passdata]="myArray"></someComponent>

现在在我的 component.ts 页面中我已经完成了

@Input() 传递数据：字符串；

在 ngOnInit 中，我已经安慰了 passdata，但我没有得到它。我是 Angular Web 组件的新手，如果做错了什么，请帮助我。

【问题讨论】：

不知道你在这里做错了什么，希望下面的答案对你有所帮助。如果您需要进一步的帮助，请附上您的代码

标签： angular

【解决方案1】：

在使用值填充输入属性之前初始化子组件。因此，您没有获得 ngOnInit 中的值。

如果您只想在模板文件中使用该值，您可以像这样直接使用@Input() 获取它 -

 @Input() name: string;

并像这样直接在html文件中使用它 -

<h1>Hello {{name}}!</h1>

但是，如果你想在 ngOnInit 中获取 Input 值，你可以使用这样的 set 方法 -

@Input()
  set myArray(value) {
    if(value) {
      this.array = value;
    }
  }

这里它首先检查 value 是否不是 null/undefined，然后将 value 分配给可以在组件本身中使用的某个局部变量。

您可以在此处查看运行示例 - InputExample （检查控制台查看结果）

【讨论】：

【解决方案2】：

父组件.html

<child-component [myArray]="myArray"></child-component>

父组件.ts

public myArray = [{value: 'aa', name: 'aaa'}, {value: 'bb', name:'bbb'}];

子组件.ts

@input() myArray;

ngOnChanges(){ console.log(myArray); }

Input example reference stackblitz

【讨论】：