javascript - Angular 4 访问其他组件数据

Question

我目前正在学习 Angular 4，但我想知道是否可以从另一个 *.component.ts 访问一个组件的数据。这是什么意思？我有以下结构

app
  first-component
    first-component.html
    first-component.ts

  second-component
    second-component.html
    second-component.ts

  app(main)-component

因此，如果我在第一个组件中有以下字符串数组:

 labels: any[] = ['Name' , 'Address' , 'Photo' , 'Date' , 'Session' , 'Description'];

有没有办法从我的 second-component.ts 访问该数组，并在我的 first-component.ts 中声明 labels 数组时执行类似的操作？

第二个组件=>

  pushItemsToArray() {
    this.labels.push(item);
  } 

那么，如果我的第二个组件中有一个表单，并且想要在我的第一个组件中呈现数据，那么这是如何发生的呢？谢谢你然后抱歉，如果该问题与另一个问题重复，但我已经搜索了很多时间，但找不到我正在搜索的内容..

Answer 1

听起来像是服务工作!对于您的示例，您可以实现类似 label-service.ts 的内容。然后，您可以将 LabelService 注入(inject)到第一个组件和第二个组件中。

要启用此功能，您需要在服务类上使用可注入(inject)装饰器，并将 LabelService 类添加到您的模块提供程序数组中。

在标签服务中，您将拥有一系列标签和一些帮助维护它们的方法(添加、删除，无论您需要什么)。

@Injectable()
export class LabelService {
   labels: any[] = ['Name' , 'Address' , 'Photo' , 'Date' , 'Session' , 'Description'];

   addLabel(label): void {
      this.labels.push(label);
   }
}

如果您在模板中使用数据，则此方法有效，因为更改检测会注意到任何更改。如果你要做一些更复杂的事情，你不能依赖更改检测，因为你可能最终需要使用 Rxjs 主题、Angular 2 输入和输出装饰器或 ngOnChanges 生命周期 Hook 。 (如果您需要，我可以就特定主题提供更多示例，请提出要求)