从父组件到子组件的 Angular 传递数组

Question

在我们开始之前，我大约 1 周前开始学习 Angular，不要害怕直接回到基础。

那么你是怎么做到的呢？在 app.component.ts 中，我有一个标准数组，需要由多个子组件访问。

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  masterArray = ['Create', 'Foo', 'Bar'];
}

如何将其拉入由 angular cli 生成的子组件。例如我需要在导航组件中使用它来生成导航面板。

<li *ngFor = "let i of masterArray; let ind = index">
  <a>{{i}}</a>
</li>

Answer 1

您可以将数组作为子组件的输入。

@Component({
  selector: 'app-navigation',
  templateUrl: './navi.component.html',
  styleUrls: ['./navi.component.css']
})
export class NavigationComponent {
  @Input() masterArray : string[];
}

并将数组传给父组件html中的子组件。

<app-navigation [masterArray]="masterArray"></app-navigation>