blocks|key|1998852|text|如果您的组件不相关，有两种解决方案:可以使用共享服务(使用可观察的)，也可以使用ngrx/store。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1998853|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

If your components are not related,there are two solutions: you can use a shared service(using observable) or you can use ngrx/store.

blocks|key|203560|text|数据共享是通过使用@Input()装饰器或@Output()和EventEmitter来实现的，据我所知:D，我对使用角很陌生。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|203561|entityMap^0|9|8|L|9|V|C|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|O|8|@]|D|@]|E|$]]]|G|$]]

Data sharing works by using the <code>@Input()</code> decorator or <code>@Output()</code> and <code>EventEmitter</code>, as much as i know :D , i'm new at using angular .

blocks|key|203736|text|通过以下方式共享数据的最佳方式：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|203737|使用input()装饰器实现数据的父级子共享。|ordered-list-item|offset|length|style|CODE|203738|使用@ViewChild()和output()装饰器来共享数据的子父级。|203739|也是用于子父级数据共享的EventEmitter。|203740|对于不相关的组件，您可以使用与服务共享的数据。|203741|entityMap^0|0|2|7|0|2|C|F|8|0|C|C|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@$E|S|F|T|G|H]]|9|@]|A|$]]|$1|I|3|J|5|D|7|U|8|@$E|V|F|W|G|H]|$E|X|F|Y|G|H]]|9|@]|A|$]]|$1|K|3|L|5|D|7|Z|8|@$E|10|F|11|G|H]]|9|@]|A|$]]|$1|M|3|N|5|D|7|12|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|P|$]]

The best way you can share data via following ways:

<ol>
<li>Using the <code>input()</code> decorator for parent child sharing of data.</li>
<li>Using <code>@ViewChild()</code> and <code>output()</code> decorators for child parent sharing of data.</li>
<li>Also <code>EventEmitter</code> for child parent sharing of data.</li>
<li>For unrelated Components you can use sharing of data with a service.</li>
</ol>

blocks|key|1998865|text|您还可以在另一个组件中直接使用函数。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1998866|例如,|1998867|注入之后，您可以在父组件中使用子component的函数。|1998868|在parent.component.ts中|offset|length|style|BOLD|1998869|@ViewChild(childComponent)+childComponentRef:+childComponent;
this.childComponentRef.myFunc();|code-block|syntax|javascript|1998870|entityMap^0|0|0|0|1|J|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|V|8|@$H|W|I|X|J|K]]|9|@]|A|$]]|$1|L|3|M|5|N|7|Y|8|@]|9|@]|A|$O|P]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

You can also directly use a function in another component.

For example, 

After that injection, you can use childComponent's function inside your parent component.

in parent.component.ts

<pre><code>@ViewChild(childComponent) childComponentRef: childComponent;
this.childComponentRef.myFunc();
</code></pre>

blocks|key|2425750|text|1.如果要在父组件和子组件之间进行通信.+=>+i.用于子组件|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2425751|import+{+Component,+OnInit,+Input,+Output,+EventEmitter+}+from+"@angular/core";|CODE|2425752|在类中添加@Input()+private+dummyData:+object;，以便从父类获取数据|2425753|和|2425754|@Output()+dataSelected+=+new+EventEmitter<Event>();|2425755|并发出一个具有要传递给父级的数据的事件。|2425756|this.dataSelected.emit(dataToPass);|2425757|二、为父母|2425758|组件div|2425759|<child-comp+[dummyData]='dummyData'+(dataSelected)="dataSelected($event)></child-comp>|2425760|2.如果您希望在同一级别的组件之间进行通信，那么|2425761|=>使用共享服务方法进行通信，创建具有有用功能的服务，并在您希望进行通信的组件中导入该服务。|2425762|有关这类通信的更多信息，请参阅以下网址：http://jasonwatmore.com/post/2018/06/25/angular-6-communicating-between-components-with-observable-subject|2425763|entityMap|0|LINK|mutability|MUTABLE|url|http://jasonwatmore.com/post/2018/06/25/angular-6-communicating-between-components-with-observable-subject^0|0|K|0|0|27|0|5|Z|0|0|0|1F|0|0|0|Z|0|0|0|0|2E|0|0|O|0|0|K|2Y|0|0^^$0|@$1|2|3|4|5|6|7|1C|8|@$9|1D|A|1E|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1F|8|@$9|1G|A|1H|B|H]]|D|@]|E|$]]|$1|I|3|J|5|6|7|1I|8|@$9|1J|A|1K|B|H]]|D|@]|E|$]]|$1|K|3|L|5|6|7|1L|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|1M|8|@$9|1N|A|1O|B|H]]|D|@]|E|$]]|$1|O|3|P|5|6|7|1P|8|@]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1Q|8|@$9|1R|A|1S|B|H]]|D|@]|E|$]]|$1|S|3|T|5|6|7|1T|8|@]|D|@]|E|$]]|$1|U|3|V|5|6|7|1U|8|@]|D|@]|E|$]]|$1|W|3|X|5|6|7|1V|8|@$9|1W|A|1X|B|H]]|D|@]|E|$]]|$1|Y|3|Z|5|6|7|1Y|8|@$9|1Z|A|20|B|C]]|D|@]|E|$]]|$1|10|3|11|5|6|7|21|8|@]|D|@]|E|$]]|$1|12|3|13|5|6|7|22|8|@]|D|@$9|23|A|24|1|25]]|E|$]]|$1|14|3|-4|5|6|7|26|8|@]|D|@]|E|$]]]|15|$16|$5|17|18|19|E|$1A|1B]]]]

1. If you want to communicate between parent component and child component.
=>
 i. For child

<code>import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core";</code>

Inside class 
add 
<code>@Input() private dummyData: object;</code>
for getting data from parent

and

<code>@Output() dataSelected = new EventEmitter&lt;Event&gt;();</code>

and emit an event with data to be passed to parent using

<code>this.dataSelected.emit(dataToPass);</code>

ii. For Parent

In component div

<code>&lt;child-comp [dummyData]='dummyData' (dataSelected)="dataSelected($event)&gt;&lt;/child-comp&gt;</code>

2. If you want to communicate between components at the same level

=> Use shared service approach for communication
Create a service with useful functions and import that service in the components where you want communication to happen.

For more info regarding this type of communication refer to this URL:
<a href="http://jasonwatmore.com/post/2018/06/25/angular-6-communicating-between-components-with-observable-subject" rel="nofollow noreferrer">http://jasonwatmore.com/post/2018/06/25/angular-6-communicating-between-components-with-observable-subject</a>

blocks|key|1998912|text|如果您的组件不相关，有两种方法可以这样做。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1998913|使用共享服务|ordered-list-item|1998914|在state中使用状态(在角7.2中是新的)，可以使用状态参数使用路由器this.router.navigate(['/'],+{+state:+{+data:+'value'+}+});传递数据。|offset|length|style|CODE|1998915|或RouterLink|1998916|<a+routerLink="/"+[state]="{+data:+'value'+}">Click+here</a>|1998917|并捕获NavigationStart事件中的数据。|1998918|router.events.pipe(filter(e+=>+e+instanceof+NavigationStart)).subscribe(e+=>+{
++const+navigation+=+router.getCurrentNavigation();
++const+data+=+navigation.extras.state.data+;
});|code-block|syntax|javascript|1998919|entityMap^0|0|0|1|5|10|1M|0|1|A|0|0|1O|0|3|F|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Y|8|@]|9|@]|A|$]]|$1|E|3|F|5|D|7|Z|8|@$G|10|H|11|I|J]|$G|12|H|13|I|J]]|9|@]|A|$]]|$1|K|3|L|5|6|7|14|8|@$G|15|H|16|I|J]]|9|@]|A|$]]|$1|M|3|N|5|6|7|17|8|@$G|18|H|19|I|J]]|9|@]|A|$]]|$1|O|3|P|5|6|7|1A|8|@$G|1B|H|1C|I|J]]|9|@]|A|$]]|$1|Q|3|R|5|S|7|1D|8|@]|9|@]|A|$T|U]]|$1|V|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]]|W|$]]

if your component is not related, there are two-way of doing this.

<ol>
<li>using shared Service</li>
<li>using state (new in angular 7.2)
in <code>state</code>,
you can pass data using state parameter
using router
<code>this.router.navigate(['/'], { state: { data: 'value' } });</code></li>
</ol>

or <code>RouterLink</code>

<code>&lt;a routerLink="/" [state]="{ data: 'value' }"&gt;Click here&lt;/a&gt;</code>

and catch the data in <code>NavigationStart</code> Event

<pre><code>router.events.pipe(filter(e =&gt; e instanceof NavigationStart)).subscribe(e =&gt; {
 const navigation = router.getCurrentNavigation();
 const data = navigation.extras.state.data ;
});
</code></pre>

blocks|key|203792|text|1.亲子|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|203793|具有父-子关系的If组件|203794|@Input，@Output，EventEmitter是个不错的选择|unordered-list-item|CODE|203795|例如：|203796|中的子组件|203797|@Input()+private+dataFromParent:+object;|203798|@Output()+dataToParentE+=+new+EventEmitter<Event>();|203799|this.dataToParentE.emit(data);|203800|父母中的|203801|<child-comp+[dataFromParent]='dataFromParent'+(dataToParentE)="dataToParentE($event)></child-comp>|203802|2.不相关的|203803|我们可以使用共享服务|203804|在角添加getter和getter中创建服务，或者使用http从服务器获取数据。|203805|在组件中(在组件中需要数据通信)，将此公共服务注入构造函数中，并使用服务中的方法获取或更新数据。|203806|constructor(+++++private+commonService:+CommonService+++)+{}|203807|entityMap^0|0|4|0|0|0|6|7|7|F|C|0|0|0|5|0|0|14|0|0|1G|0|0|U|0|2|2|0|0|2Q|0|0|6|0|0|0|0|0|1O|0^^$0|@$1|2|3|4|5|6|7|1B|8|@$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1E|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1F|8|@$9|1G|A|1H|B|K]|$9|1I|A|1J|B|K]|$9|1K|A|1L|B|K]]|D|@]|E|$]]|$1|L|3|M|5|6|7|1M|8|@]|D|@]|E|$]]|$1|N|3|O|5|6|7|1N|8|@$9|1O|A|1P|B|C]]|D|@]|E|$]]|$1|P|3|Q|5|6|7|1Q|8|@$9|1R|A|1S|B|K]]|D|@]|E|$]]|$1|R|3|S|5|6|7|1T|8|@$9|1U|A|1V|B|K]]|D|@]|E|$]]|$1|T|3|U|5|6|7|1W|8|@$9|1X|A|1Y|B|K]]|D|@]|E|$]]|$1|V|3|W|5|6|7|1Z|8|@$9|20|A|21|B|C]]|D|@]|E|$]]|$1|X|3|Y|5|6|7|22|8|@$9|23|A|24|B|K]]|D|@]|E|$]]|$1|Z|3|10|5|6|7|25|8|@$9|26|A|27|B|C]]|D|@]|E|$]]|$1|11|3|12|5|6|7|28|8|@]|D|@]|E|$]]|$1|13|3|14|5|6|7|29|8|@]|D|@]|E|$]]|$1|15|3|16|5|6|7|2A|8|@]|D|@]|E|$]]|$1|17|3|18|5|6|7|2B|8|@$9|2C|A|2D|B|K]]|D|@]|E|$]]|$1|19|3|-4|5|6|7|2E|8|@]|D|@]|E|$]]]|1A|$]]

1. Parent-child

If components having Parent-child relation

<ul>
<li><code>@Input</code>, <code>@Output</code>, <code>EventEmitter</code> is good option</li>
</ul>

Eg.

In Child Component 

<code>@Input() private dataFromParent: object;</code>

<code>@Output() dataToParentE = new EventEmitter&lt;Event&gt;();</code>

<code>this.dataToParentE.emit(data);</code>

In Parent

<code>&lt;child-comp [dataFromParent]='dataFromParent' (dataToParentE)="dataToParentE($event)&gt;&lt;/child-comp&gt;</code>

2. Not related

We you can use a shared service

Create a service in angular add getter and setters or fetch the data from server using http

And In the components (in which you want data communication) inject this common service in the constructor and use the methods in service to get or update the data

<code>constructor(
 private commonService: CommonService
 ) {}</code>

What is the best way to share data between components in Angular 7?

Can I use @Input and @Output only for components that are in the relation of child and parent?

Angular 7 - Sharing Data

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

在角度7中的组件之间共享数据的最佳方法是什么？@Input和@Output能否仅用于子组件和父级关系中的组件？

问角7-共享数据
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问角7-共享数据EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问角7-共享数据
EN