Question

所以我有一个包含列表数组的组件：

组件TS：

list = [
{name:Jhon},
{name: Pop}
]

组件html：

<h2>List :</h2>
<b-component></b-component> //how to pass list to B component here ?

B组件html：

<div *ngFor="let item of list">
{{list.name}}
</div>

如何将A组件列表传递给标签上的B组件？

Answer 1

查看此stackblitz demo

父组件

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <hello [list]="list"></hello>
  `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  list = ['abc', 'edf', 'ghi'];
}

子组件

import { Component, Input } from '@angular/core';

@Component({
  selector: 'hello',
  template: `
  <ul>
    <li *ngFor="let item of list">
      {{item}}
    </li>
  </ul>
  `
})
export class HelloComponent {
  @Input() list: string[];
}

Answer 2

在您的 B组件.ts文件中，您必须像这样定义列表：

@Input() list;

通过此操作，您可以使用 B组件html 中的列表。

Angular 2将变量从一个组件传递到另一个组件

2 个答案: