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

前端之家收集整理的这篇文章主要介绍了从父组件到子组件的角度传递数组前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在我们开始之前,我在大约一周前开始学习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>

解决方法

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

@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>

猜你在找的Angularjs相关文章