Javascript 角度4访问其他组件数据

Javascript 角度4访问其他组件数据,javascript,angular,Javascript,Angular,我目前正在学习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

我目前正在学习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'];
有没有办法从我的
第二个组件.ts中访问该数组,并在我的
第一个组件.ts中声明标签数组时执行类似操作

第二部分=>

  pushItemsToArray() {
    this.labels.push(item);
  } 
因此,如果我在第二个组件中有一个表单,并且希望在第一个组件中呈现数据,那么会发生什么呢?谢谢你,还有
很抱歉,如果这个问题与另一个问题重复,但我已经搜索了很多时间,找不到我正在搜索的内容。

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

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

在标签服务中,您将有一个标签数组和一些方法来帮助维护它们(添加、删除,任何您需要的)


如果您正在使用模板中的数据,则此方法有效,因为更改检测将注意到任何更改。如果您要做一些更复杂的事情,而不能依赖于更改检测,那么您可能最终需要使用Rxjs主题、angular 2输入和输出装饰器或ngOnChanges生命周期挂钩。(如果你需要,我可以在一个特定的主题上给出更多的例子,jsut ask)

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

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

在标签服务中,您将有一个标签数组和一些方法来帮助维护它们(添加、删除,任何您需要的)


如果您正在使用模板中的数据,则此方法有效,因为更改检测将注意到任何更改。如果您要做一些更复杂的事情,而不能依赖于更改检测,那么您可能最终需要使用Rxjs主题、angular 2输入和输出装饰器或ngOnChanges生命周期挂钩。(如果需要的话,我可以提供更多关于特定主题的示例,jsut ask)

我发现使用行为主题的最好方法是创建一个消息服务来促进这一点。本文对此进行了很好的解释


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

我发现最好的方法是使用行为子对象,创建一个消息服务来实现这一点。本文对此进行了很好的解释


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

除了共享服务之外,您能留下更多的second-component.ts和first-component.ts代码吗,这两个组件的父组件通过向下传递来检索和共享数据可能是有意义的。除了共享服务之外,您能留下更多的second-component.ts和first-component.ts代码吗,这两个组件的父组件通过向下传递来检索和共享数据可能是有意义的;和提供者:[LabelService]在我的@组件中,然后获取错误_co.showItems不是一个函数,可能我做错了什么。。或者根本拿不到:我真的做到了。。我忘了在构造函数中添加服务并从那里使用它:)尝试做您在回答中提到的事情,创建一个服务,然后在我的第一个组件中导入该服务,比如从“../label.service”导入{LabelService};和提供者:[LabelService]在我的@组件中,然后获取错误_co.showItems不是一个函数,可能我做错了什么。。或者根本拿不到:我真的做到了。。我忘了在构造函数中添加服务并从那里使用它:)
@Injectable()
export class LabelService {
   labels: any[] = ['Name' , 'Address' , 'Photo' , 'Date' , 'Session' , 'Description'];

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