Question

我目前正在学习Angular 4，但我想知道我是否可以从另一个* .component.ts中的* .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中声明标签数组时执行此类操作？

second-component =＆gt;

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

所以，如果我的第二个组件中有一个表单，并希望在我的第一个组件中呈现数据，那会怎么样？谢谢你然后对不起，如果这个问题与另一个问题重复，但我一直在搜索很多时间而无法找到我要搜索的内容..

Answer 1

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

要启用此功能，您需要在服务类上使用injectable装饰器，并将LabelService类添加到模块提供者数组中。

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

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

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

如果您在模板中使用数据，则此方法有效，因为更改检测会发现任何更改。如果你要做一些更复杂的事情，你不能依赖于变化检测，你最终可能需要使用Rxjs主题，角度2输入和输出装饰器，或ngOnChanges生命周期钩子。（如果需要，我可以提供更多关于特定主题的例子，请问）

Answer 2

我发现使用BehaviorSubjects的最好方法是创建一个消息服务来促进这一点。本文非常好地解释了这一点4 methods to share data

我发布了此类服务的示例代码here

Angular 4访问其他组件数据

2 个答案: