在Angular中的组件之间创建通信通道
在Angular中，组件之间的通信可以通过多种方式实现，包括父子组件通信、兄弟组件通信和跨级组件通信。下面是一些常用的方法：
- 父子组件通信：
- 使用@Input和@Output装饰器：通过在父组件中使用@Input装饰器将数据传递给子组件，并通过@Output装饰器和EventEmitter在子组件中触发事件将数据传递回父组件。
- 使用ViewChild装饰器：通过在父组件中使用ViewChild装饰器获取子组件的引用，并直接调用子组件的方法或访问子组件的属性。
- 兄弟组件通信：
- 使用共享服务：创建一个共享服务，在该服务中定义一个可观察对象，兄弟组件通过订阅该对象来实现通信。
- 使用路由参数：通过在路由中传递参数，在兄弟组件中通过ActivatedRoute服务获取参数值。
- 跨级组件通信：
- 使用共享服务：同样可以使用共享服务来实现跨级组件通信。
- 使用@ViewChild和@Output装饰器的组合：通过在中间组件中使用@ViewChild获取子组件的引用，并通过@Output装饰器和EventEmitter将数据传递给父组件。
这些通信方式都有各自的优势和适用场景。例如，父子组件通信适用于父组件向子组件传递数据或从子组件获取数据；兄弟组件通信适用于同级组件之间的通信；跨级组件通信适用于非直接关联的组件之间的通信。
在腾讯云的产品中，没有直接与Angular组件通信相关的产品，但可以使用腾讯云提供的其他产品来支持Angular应用的开发和部署。例如，可以使用腾讯云的云服务器（CVM）来部署Angular应用，使用云数据库MySQL来存储数据，使用云存储COS来存储静态资源，使用云函数SCF来实现后端逻辑，使用云监控CM和云日志CLS来监控和日志分析等。
更多关于腾讯云产品的信息和介绍，可以访问腾讯云官方网站：https://cloud.tencent.com/
相关·内容
对于组件交互，我在angular6中有一些查询。对于组件交互，我们有@Input、@Output、viewChild和services等方法。但大多数情况下我们将使用服务。
在什么情况下，我们需要使用@Input、@Output和viewChild来传递应用程序中的值
@Input、@Output和viewChild方法有什么限制吗？
我们可以使用@Input，@Output方法传递大量数据或值数组吗？
我们可以在本地范围内使用“输入”和“输出”吗？请帮助我澄清我的疑虑
浏览 0提问于2019-07-19得票数 1
回答已采纳
请帮助我解释在Angular 4中使用嵌套组件的最佳方法，以及将父组件的方法调用给子组件，反之亦然。请用一个例子和现场编辑来解释。
提前谢谢。
我想学习和设计我自己的表集或其他组件使用角4，如tabset，ngx-引导，但更多提前。我对角> 2很陌生。
以下是情况：
从组件中公开几个api。
使用该api将/寄存器/检索数据/方法/设置设置为/从组件。
我想学习如何使用不同的软件设计模式作为一个框架来构建一个组件。
因此，要从不同组件间的交流经验中正确地获取深度知识。我的官方文件如下：
浏览 1提问于2017-07-31得票数 1
回答已采纳
4回答
我正在努力变得更好的角度，我想知道最好的做法之间的儿童-家长沟通。我现在想使用的应用程序是角度6，我知道我可以使用@ViewChild、@Output或创建服务在子父组件之间进行通信。还有其他的沟通方式吗？如果不是，那三个中哪一个更好，为什么？
下面是一个简单的例子：
子HTML
<button (click)="onLinkedClicked();">Click me</button>
儿童TS
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/co
浏览 0提问于2018-08-09得票数 5
回答已采纳
我在一个Angular4应用程序中工作，我正在尝试将值从子组件传递到父组件。.I已经实现了一些东西，但我无法获得预期的输出。
子组件映像...
下级组件编码...
<div class="row">
<div class="col-3">
<input type="text" readonly class="form-control col-8 text-center bg-white font-weigh
浏览 0提问于2018-03-12得票数 11
回答已采纳
我正在升级一个大型的Angular 1.6应用程序，我们有许多组件使用'require‘来访问父组件的控制器。AngularJS组件如下所示：
var tileTextbox = {
template: '<ignore>',
controller: TileTextboxController,
bindings: {
field: '<',
notifyError: '&',
context
浏览 3提问于2018-11-30得票数 2
我使用了两个组件，SelectTag和主要组件SettingsComponent。select组件是一个带有选择器的简单指令，但我遇到的问题是更新子组件中的父变量。 例如:我在选择器组件中有一个变量(name)的ngModel绑定，但是我如何从父组件(设置)访问它？ 到目前为止，我尝试使用的是Angular EventEmitter： @Output() onNameChange: EventEmitter<string>; ...and通过访问它 <select-tag (onNameChange)="name = $event"> 有没有更好的做法
浏览 13提问于2019-06-29得票数 0
回答已采纳
我是angular2的新手，我对使用EmitterService的EventEmitter感到困惑，任何人都能解释我使用发射器的目的。
不使用@input和@output，我们可以将数据发送到一个页面组件到另一个页面组件。
谢谢
浏览 2提问于2016-08-17得票数 2
回答已采纳
1回答
我正在尝试为angular编写一个带有标记组件的地图组件。
<app-map>
<app-marker
*ngFor="let device of (devices$ | async)"
[position]="device.position"></app-marker>
</app-map>
我希望标记组件能够通知地图组件任何新位置。
import { Component, OnInit, Input, Output } from '@angular/core';
@Co
浏览 0提问于2019-02-06得票数 0
只要学习Vue，请帮帮忙， 我可以导入一些组件 import products from './components/products.vue' 如何获取/设置一些数据，例如 props: {msg: String},data(){ return {bar: 2019}},
浏览 21提问于2019-05-08得票数 0
回答已采纳
1回答
你好，在那里学习角，并遇到@输出装饰角。在研究了这个话题之后，我仍然很难理解这个概念。
代码示例：
app.component.html：
<app-tutorials(event)="doSomething($event)"></app-tutorials>
app.component.ts：
import { Component} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component
浏览 0提问于2017-11-15得票数 1
回答已采纳
1回答
我正在使用angular，试图与非父子组件进行通信。所以我通过服务来传达它 service.ts Istoggle=false;
@Output() change: EventEmitter < boolean > = new EventEmitter();
toggle() {
this.Istoggle= !this.Istoggle;
this.toggle.emit(this.Istoggle);
} search.ts submit():void{
this.service.toggle();
} Home.ts ngOnInit() {
浏览 12提问于2019-02-20得票数 0
回答已采纳
1回答
似乎有几种方法来剥这只猫的皮，但我想知道最好的方法(练习)和原因。
如果我想在子-cmp中收集一些数据并将其传递给父-cmp，我可以：
用父对象的函数包装对象，并将其作为输入传递给子对象，调用输入上的函数。
在子-cmp中创建一个EventEmitter函数并发出结果，收集父-cmp中的数据.
通过@ViewChild()访问子节点，并直接调用它的方法。
创建一个ngModel (仅在表单中？)要收集的数据
我肯定还有更多。我觉得使用事件发射器是最天使的事情，对于一个非形式的组件。但我无法解释为什么有一个良好的技术基础。有什么想法？
浏览 2提问于2017-07-28得票数 2
回答已采纳
我得先把一些数据从孩子传给父母。在此之后，需要将相同的数据从此父级传递给另一个子级。
我做的第一件事是，我把一些数据从孩子发给父母。但是现在我需要把这个数据从这个家长发送到另一个孩子，我怎么能做到这一点。
这三个组成部分是，
parent1
child1
child2
子1组件ts
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child1',
templateUrl:
浏览 0提问于2019-07-31得票数 0
我很好奇，如果父母的后代的后代想要将信息传递回父母，那么传递回信息的后代是否需要通过链进行备份。
descendant2 Component -> descendant1 Component -> Parent Component
这将是后代2组件中的事件发射器：
@Output() loginStatus: EventEmitter<boolean> = new EventEmitter<boolean>();
formSubmit(){this.loginStatus.emit(true);}
在父对象中，我们只需捕获该事件
<registerFo
浏览 8提问于2017-08-08得票数 0
2回答
我试图将数据从子组件传递回父元素(角4)。此数据来自“表单输入”，用户可以在其中插入一些信息。不幸的是，信息没有返回到父元素。我在找解决方案有人能帮我吗？我的密码..。
将信息从父元素发送到子组件：
<app-fix-period
[fixPeriodChoices]="model.fix_period"
[date_time_start]="model.date_time_start"
[date_time_end]="model.date_time_end"
[begin_hour]="begin
浏览 3提问于2017-10-20得票数 0
回答已采纳
将代码转换为子组件mycomponent.ts
import { Component, OnInit , EventEmitter, Output } from '@angular/core';
@Component({
selector: 'app-mycomponent',
template: `
<button (click)="clickchild()">Click me!</button>
`
})
export class MycomponentComponent {
@Outp
浏览 0提问于2018-07-12得票数 1
回答已采纳
我有这样的html结构：
同时驻留Comp1和Comp2的父组件：
现在，在comp1中，我有一些元素，如果这种情况发生了变化，那么我必须在comp2中反映值，但是它们之间没有联系。
Comp1 :
import { Component } from '@angular/core';
import { Comp2Component } from 'comp2.component';
@Component({
selector: 'comp1',
templateUrl: './comp1.html'
})
export
浏览 5提问于2017-08-16得票数 1
回答已采纳
我刚开始学习Angular2，遇到了@Input和@Output。两者之间的区别是什么？
浏览 0提问于2016-10-17得票数 12
有许多代码示例演示组件通信，
我对这两种技术之间的区别感到困惑。
ChildComponent
ViewChild
定义了ViewChild：
ViewChild装饰器可以从父组件类访问子组件、指令或DOM元素，ViewChild返回与给定组件、指令或模板引用选择器匹配的第一个元素。
根据这份资料，
ViewChild赋予对DOM元素的父组件完全访问权，指令在任何更新时不向父组件发送EventEmitter。
我的问题
我们可以说父组件和视图子组件之间的关系只是单向的，而父组件和子组件之间的关系是双向绑定的？
如何运作核心，数据绑定，生命周期？
真正的实际用
浏览 3提问于2018-07-26得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
