从父组件到子组件的角度传递数组

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'];
}

如何将其拉入由角度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>