如何从组件模板中将数组作为 Input() 传递？

Question

我需要使用绑定将值数组传递给组件，例如

@Component({
    selector: 'my-component',
    template: '<div data="[1, 2, 'test']"></div>
})
export class MyComponent {
    @Input() data: any[];
    ...
}

但是，Angular 似乎将此视为

string

/

string[1]

（在实际项目中，数组是一条路线，我需要将此路线传递给具有

[routerLink]

指令的组件）。

我该怎么办？

Answer 1

你需要用

[]

包裹属性，否则 Angular 根本不会处理它：

[data]="[1, 2, 'test']"

您的示例似乎是从组件内部设置

data

。这不是绑定的工作原理。您可以对组件执行的操作是

<my-component [data]="[1, 2, 'test']"></my-component>

将数据从外部传递到您的组件。

Answer 2

所以让我们从这里开始...在 Angular 2+ 中，如果没有括号，所有输入都会传递一个字符串...

所以有两种方法可以传承你的价值观...

如果你这样写：

'<div data="[1, 2, 'test']"'

你基本上将其理解为“[1, 2, 'test']”（作为字符串）...

你这样做的方式是传递strings的好方法，你也可以使用插值并将其与javascript混合，然后像“Angular {{version}}”一样传递它

因此，要将其作为数组或任何 javascript 无刺值传递下来，您需要在输入周围使用

[]

，如下所示...

<div [data]="[1, 2, 'test']"></div>

Answer 3

通常，仅当组件嵌套在另一个组件中时才使用输入。

所以在另一个组件中，类似：

<my-component [data]= ...>

Answer 4

我知道这个答案不适合被问到的人，但对于搜索问题主标题的人来说会有帮助。

// app component
@Component({
    selector: 'app-root',
    template: '<app-child [data]="dataList"></app-child>'
})    
export class AppComponent {
   dataList = [1, 2, 'test'];
}

下面是另一个从应用程序组件调用的子组件

@Component({
    selector: 'app-child',
    template: `
      <ul>
          <li *ngFor="let d of givenList">{{ d }}</li>
      </ul>
    `
})    
export class AppComponent {
   @Input() givenList: any[];

}