在Angular 2中,可以通过使用输入属性将硬编码数组传递给组件。输入属性允许从父组件向子组件传递数据。
首先,在子组件的类中定义一个输入属性,用于接收传递的数组数据。例如,假设子组件的名称为ChildComponent,可以在ChildComponent类中添加以下代码:
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-child',
template: `
<div *ngFor="let item of items">
{{ item }}
</div>
`
})
export class ChildComponent {
@Input() items: any[];
}
在上述代码中,@Input()装饰器用于定义一个名为items的输入属性,类型为any[],用于接收传递的数组数据。
接下来,在父组件的模板中使用子组件,并通过输入属性将数组传递给子组件。假设父组件的名称为ParentComponent,可以在ParentComponent的模板中添加以下代码:
<app-child [items]="hardcodedArray"></app-child>
在上述代码中,[items]="hardcodedArray"表示将父组件中名为hardcodedArray的数组传递给子组件的items输入属性。
最后,在父组件的类中定义hardcodedArray数组,并为其赋值。例如:
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
<app-child [items]="hardcodedArray"></app-child>
`
})
export class ParentComponent {
hardcodedArray: any[] = ['Item 1', 'Item 2', 'Item 3'];
}
在上述代码中,hardcodedArray数组包含了要传递给子组件的硬编码数组数据。
这样,当父组件渲染时,子组件将接收到父组件传递的硬编码数组,并在子组件的模板中使用ngFor指令循环遍历并显示数组中的每个项。
请注意,以上代码仅为示例,实际情况中,你可能需要根据你的具体需求进行适当的修改和调整。
领取专属 10元无门槛券
手把手带您无忧上云