Angular将数组从父组件传递给子组件

Question

在开始之前，我大约一周前开始学习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>

- Alistair Hardy

---

可能是Angular 2将数据从父组件传递到子组件的重复问题。 - Jota.Toledo

我的建议是：每当你有问题时，在在Stack Overflow上创建内容之前，请先在谷歌上搜索并阅读更多相关信息。这是一个非常基础的话题，直接像你这样提问在我看来缺乏研究能力。 - Jota.Toledo

我已经在谷歌上搜索并阅读了多个SO线程，甚至包括你自己链接的那个。然而，我要么无法使它们正常工作，要么它们与我所做的事情不相关。 - Alistair Hardy

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>

- subaru710

---

谢谢！我也是Angular的新手。在其他答案中，我缺少的就是HTML。 - jones-chris

Answer 2

如果数据需要被多个子组件访问，您可能希望创建一个服务。该服务可以保存数组，任何组件都可以访问它。

这里有一个简单的例子：https://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/

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

@Injectable() 
export class DataService {
  masterArray = ['Create', 'Foo', 'Bar']; 
}

然后，您可以像这样访问该数据：

import {Component} from '@angular/core';
import { DataService } from './data.service';

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

 get masterArray() { 
    return this.dataService.masterArray; 
 } 

 constructor(public dataService: DataService) { } 
}

- DeborahK