将子组件的输出发送到父Angular
Angular是一种流行的前端开发框架，用于构建单页应用程序。在Angular中，子组件可以通过输出属性将数据发送到父组件。下面是关于将子组件的输出发送到父Angular组件的完善且全面的答案：
概念： 在Angular中，子组件可以通过使用@Output装饰器来定义输出属性。输出属性允许子组件将数据发送到父组件。
分类： 将子组件的输出发送到父Angular组件可以分为以下几种方式：
- 通过事件绑定：子组件可以通过触发自定义事件并将数据作为事件参数来发送数据到父组件。
- 通过回调函数：子组件可以通过调用父组件传递的回调函数并将数据作为参数来发送数据到父组件。
- 通过服务：子组件可以通过共享服务来将数据发送到父组件。
优势： 将子组件的输出发送到父Angular组件具有以下优势：
- 组件通信：通过将数据发送到父组件，子组件可以与父组件进行通信，实现数据的共享和交互。
- 解耦合：通过使用输出属性，子组件和父组件之间可以实现解耦合，使得它们可以独立开发和测试。
- 可重用性：通过将数据发送到父组件，子组件可以更加通用和可重用，因为它们不依赖于特定的父组件。
应用场景： 将子组件的输出发送到父Angular组件适用于以下场景：
- 表单数据：当子组件包含表单元素时，可以通过将表单数据发送到父组件来实现表单的提交和处理。
- 交互组件：当子组件需要与用户进行交互并将结果发送到父组件时，可以使用输出属性来实现。
- 组件通信：当子组件需要与其他组件进行通信时，可以通过将数据发送到父组件来实现组件之间的通信。
推荐的腾讯云相关产品和产品介绍链接地址： 腾讯云提供了一系列云计算相关的产品和服务，以下是一些推荐的产品和对应的介绍链接地址：
- 云服务器（CVM）：提供可扩展的云服务器实例，用于部署和运行应用程序。详细介绍请参考：https://cloud.tencent.com/product/cvm
- 云数据库MySQL版：提供高性能、可扩展的云数据库服务，适用于各种应用场景。详细介绍请参考：https://cloud.tencent.com/product/cdb_mysql
- 云原生容器服务（TKE）：提供高度可扩展的容器化应用程序管理平台，简化容器的部署和管理。详细介绍请参考：https://cloud.tencent.com/product/tke
- 人工智能平台（AI Lab）：提供丰富的人工智能开发工具和服务，帮助开发者构建和部署AI应用。详细介绍请参考：https://cloud.tencent.com/product/ailab
- 物联网套件（IoT Hub）：提供全面的物联网解决方案，包括设备管理、数据采集和应用开发等功能。详细介绍请参考：https://cloud.tencent.com/product/iothub
请注意，以上链接仅供参考，具体的产品选择应根据实际需求和情况进行评估和决策。
相关·内容
父组件正确显示数据，但没有将异步填充的数据发送给子组件 我是Angular的新手，我从这个页面开始关注它的文档：https://angular.io/guide/component-interaction我能够使用Angular服务异步地将文件详细信息读入父组件。当我显示来自父组件的文件详细信息时，我可以看到文件被正确读取。当我使用@Output()变量传递数据并使用@Input在子组件中接收数据时，我得到的是空数据，就好像子组件同步而不是异步地接收输入一样。 以下是该服务： import { Injectable } from '@angular/core';
import
浏览 15提问于2019-09-07得票数 0
回答已采纳
我得到了表单的一个主要组件和部分的三个组件
现在在主表单中，我有提交按钮，我想用它来向服务提交所有的区段数据？
我如何才能做到这一点？
是否在所有部分组件中使用输出事件发射器，并在提交之前获取主表单组件中的数据？
谢谢
我正在angular2中创建一个表单(包含多个部分)，此表单将成为审批工作流的一部分。
工作流将不在angular2中，尽管表单将从工作流中引用。当我们从工作流的不同阶段打开表单时，它将允许用户仅查看或编辑表单的某些部分。
我应该如何设计我的带有部分的表单？
1)整个表单使用一个组件？
2)每个部分都有单独的组件，并且有一个主要的父组件？
在表单加载时；运行业务逻辑检查，以确
浏览 1提问于2016-11-18得票数 1
我是angular2的新手，我对使用EmitterService的EventEmitter感到困惑，任何人都能解释我使用发射器的目的。
不使用@input和@output，我们可以将数据发送到一个页面组件到另一个页面组件。
谢谢
浏览 2提问于2016-08-17得票数 2
回答已采纳
亲爱的，关于web组件交互的黄金规则是：
父母引用直接子女
孩子不指代父母
父->子调用:通过方法调用
子->父级:通过事件
这种模式在许多项目(YUI，JQuery，.)中都适用。那Angular2呢？
我们是否应该使用：
还是输入/输出？
第一选择看起来很漂亮。@angular2专家，你觉得呢？
所有人，加布里埃尔
浏览 6提问于2016-07-14得票数 12
我在我的角度应用程序中使用了诱杀器，它被分割成这样
这是我的Datepicker.html文件
<form class="form-inline">
<div class="form-group">
<div class="input-group">
<input class="form-control" placeholder="yyyy-mm-dd"
name="dp" [(ngModel)]="
浏览 1提问于2021-01-11得票数 0
我有两个组件，它们都链接到同一个模块：
angular.module('app', []);
第一个组件是一个简单的输入字段和按钮。
angular.module('app').component('myInput', {
template: '<input data-ng-model="$ctrl.value"/>' +
'<button data-ng-click="$ctrl.post()">Post</button&
浏览 0提问于2017-01-26得票数 1
回答已采纳
4回答
从子项到父项的角度传递数据
、、、、
我正在学习/从事Angular项目，我已经做了很多事情，我试图以“正确的方式”做事情，所以现在我想做的是：
我想从子组件到父组件获取变量(输出)，但我不想使用输出，我不想听它，我想在父组件需要它的时候获取它，比如child.getVariable()我遇到过一个帖子，说我应该使用子视图，但问题和我的不一样，所以我想知道使用子视图从子组件获取数据是不是一个好的做法？
浏览 7提问于2016-12-18得票数 9
在我的角度应用程序中有两个组件(Component1和Component2)。这两个组件是我在应用程序组件中呈现的。现在，我想从Component1向Component2发送一个值。如何发送。有什么最佳做法吗？
在Component1中，我有这样的代码。Component1.html
<button (click)="passData()">Click Me</button>
Component1.ts
import { Component, OnInit , Output , EventEmitter } from '@angular/core
浏览 3提问于2017-11-21得票数 2
我想要监听来自父组件的子组件上的单击事件，但该事件不会发送到父组件。
子组件：
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'child-component',
templateUrl: './child-component.component.html',
})
export class ChildComponent implements OnInit {
@Output
浏览 27提问于2019-07-31得票数 1
2回答
如何在不使用输入和输出的情况下从子组件中更改变量的值或在父组件中使用方法
我试过这样的方法但不起作用。
@Component({
selector: 'child',
template: `
<div>
<h2>{{name}}</h2>
<button (click) = "rename()" > Rename Parent </button>
</div>
`,
})
export class Child {
name:string
浏览 7提问于2016-11-28得票数 0
回答已采纳
我对Angular8 (2)比较陌生。
如何将userInformation发送到另一个名为“设置”的组件并将其显示在页面上？如果有什么变化会自动更新。
任何帮助都是徒劳无功的。
export interface UserInfoModel {
id: string;
email?: string;
firstName?: string;
lastName?: string;
mobile?: string;
createdAt: string;
}
private userInformation: UserInfoModel;
this.http
.post<Request
浏览 6提问于2019-10-07得票数 0
回答已采纳
1回答
离子惰性加载子数组中的模块
、、、、
我有一个离子应用程序，在Page module下面有一个List Page Module和一个Subdir Page Module。下面是文件夹结构-> list/subdir.
problem ：当我导航到localhost:8100/list/subdir而不是Subdir page加载时，我遇到了总是加载List page module的问题。
Outcome：我希望在导航到localhost:8100/list/subdir时加载Subdir page；但它加载的是List page。我只想在URL为localhost:8100/list时加载List pa
浏览 54提问于2019-06-05得票数 1
对于组件交互，我在angular6中有一些查询。对于组件交互，我们有@Input、@Output、viewChild和services等方法。但大多数情况下我们将使用服务。
在什么情况下，我们需要使用@Input、@Output和viewChild来传递应用程序中的值
@Input、@Output和viewChild方法有什么限制吗？
我们可以使用@Input，@Output方法传递大量数据或值数组吗？
我们可以在本地范围内使用“输入”和“输出”吗？请帮助我澄清我的疑虑
浏览 0提问于2019-07-19得票数 1
回答已采纳
当输入属性发生更改时，Angular不会调用更改检测。我读到过，除非绑定发生变化，否则angular不会调用onChanges，但在本例中，我将输入绑定到了ng datePicker模型，但仍然没有调用ngOnChanges。
以下是附加的stackBlitz示例：
浏览 6提问于2018-09-26得票数 0
我有一个功能组件，它从输入字段获取用户输入，父组件是一个类组件。我希望将用户输入数据从功能组件发送到类组件，以便进行验证。如何做到这一点呢？
浏览 0提问于2020-02-13得票数 0
ParentComponent.html
<div ["child-component"]> </div>
ChildComponent.html
<div> This is a Child Component </div>
ChildComponent.ts
import { Component } from '@angular/core';
import { FormBuilder } from '@angular/forms';
@Component({
selector: &#
浏览 4提问于2019-08-12得票数 0
我正在尝试将数据从父传递给子。当我将字符串(data1)从父级传递到子级时，我得到了正确的输出，但是当我试图显示对象(数据)时，控制台表示它是未知的，屏幕上没有显示任何内容。
父组件：
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class
浏览 3提问于2021-05-12得票数 1
通过遵循本教程，我正在学习角组件之间的通信：
在我的项目中，复制了父组件：
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
<app-child [childMessage]="parentMessage"></app-child>
`,
styleUrls: ['./parent.component.css']
})
export cl
浏览 0提问于2019-05-03得票数 0
回答已采纳
1回答
上下文
我正在编写一个Angular2应用程序，在这个应用程序中，我希望使用多个服务来访问不同的端点。我希望每个服务缓存其数据，以减少发出的请求数量，并允许多个组件在将数据发送到端点之前修改缓存中的数据。
代码
@Injectable()
export class MyService {
private items: any;
constructor (private http: Http) {
this.items = [];
}
getItems () {
if(!this.items) {
return this.http.get(t
浏览 2提问于2017-01-25得票数 5
3回答
我尝试在我的两个组件(父组件和子组件)之间使用双向绑定，并尝试在这两个组件的ngOnChanges中检测由此引起的更改。我可以通过改变父组件(App组件)的输入/输出属性来触发子组件(测试组件)的ngOnChanges。但是，我无法通过更改子组件中的双向绑定属性来触发父组件的ngOnChanges。
工作柱塞可以在这里找到：
import { Component, OnInit, OnChange, Output, Input, EventEmitter } from '@angular/core';
@Component({
selector: 'my-app&
浏览 3提问于2017-06-09得票数 1
2回答
我是初学者到角度6，目前面临一个与数据绑定的问题。我已经创建了一个测试项目，它显示了一个带有父和子关系的数据绑定的标题，但是它不是working...Any 1可以帮助我吗？
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<h1>{{title}}</h1> //need to print child components title variable
浏览 2提问于2018-12-08得票数 0
回答已采纳
我正在尝试调用我的close()函数，它位于Angular中的子组件的父组件中。
这是我在上的代码，我试图导入组件并直接在我的子组件中调用函数，但我得到了这个错误:无法读取未定义的属性'close‘
我该如何解决这个问题呢？
浏览 0提问于2017-06-10得票数 7
回答已采纳
我正在研究angular.io上的教程，然后我注意到了@Input装饰器属性：
// src/app/hero-detail/hero-detail.component.ts
import { Component, OnInit, Input } from '@angular/core';
import { Hero } from '../hero';
@Component({
selector: 'app-hero-detail',
templateUrl: './hero-detail.component.html'
浏览 0提问于2017-08-18得票数 63
1回答
在带提前(AOT)编译的Angular 2中，我有一个父组件和一个子组件，如下所示：
<div>
<h1>I am a parent</h1>
<myChild *ngIf="showChild"></myChild>
</div>
我知道子模板是动态插入到DOM中的。
如果showChild的计算结果为false，Angular到底什么时候销毁该子组件？或者Angular会完全销毁子组件吗？是时间角度调用了onDestroy()方法吗？
浏览 1提问于2017-04-06得票数 32
回答已采纳
我刚开始学习Angular2，遇到了@Input和@Output。两者之间的区别是什么？
浏览 0提问于2016-10-17得票数 12
我是新来Angular的，我来自React.js
我有一个问题，在接收到来自父组件的数据后，Angular会在ngAfterContentChecked内部永远发出HTTP请求
我无法在ngAfterContentInit中发出请求，因为我需要等待父进程完成发出请求
我只想让它在从父级获取数据后立即调用一次
在React.js中，我通常会在componentWillReceiveProps内部发出请求
在Angular中，我这样做。
父组件：
//codes...
groupId = '';
//codes...
ngOnInit() {
const id = '
浏览 2提问于2018-10-10得票数 1
我需要从子组件中获取数据。我的子组件有以popu表示的表单。如何将全部详细信息传递给父组件。我的父组件ts文件是
import { Component, OnInit } from '@angular/core';
import {MdDialog, MdDialogRef} from '@angular/material';
@Component({
selector: 'app-vehicle-relocate',
templateUrl: './vehicle-relocate.component.html
浏览 2提问于2017-04-27得票数 2
回答已采纳
今天，我开始学习Angular2，我可以清楚地看到为什么需要指令中的“输入属性”，因为它使父->子通信更加容易，但我并不完全理解指令中“输出属性”的用例。有人能解释一下吗？
浏览 0提问于2016-03-29得票数 0
回答已采纳
我正在开发一个Angular2应用程序，用户可以在那里重新定位并登录。为了处理会话--为了本讨论的目的，这意味着如果用户登录或未登录，则只表示一个标志--我创建了一个如下所示的服务：
import {Injectable} from 'angular2/core';
@Injectable()
export class SessionService {
private _status:boolean;
constructor () {
if(1 == 1) {
this._status = true;
}
console.log(
浏览 1提问于2016-04-01得票数 5
回答已采纳
如果我的angular2应用程序看起来像这样，顶部的金发女郎要和右边的生姜聊天，他们应该为它组织一个聚会吗？
发出事件，使用输入输出--这是angular2的方式吗？数据应该从子到父流到根，然后从父到子流到点？我是新来的，我经常希望有一些全局对象，在那里我可以保存一些所有组件都需要知道的信息。当该全局对象中的数据发生变化时，它应该神奇地改变它注入的所有其他服务和组件。例如，用户登录/退出，或者如果他单击按钮等等。
import {Injectable} from 'angular2/core';
@Injectable()
export object Globals {
浏览 3提问于2016-02-03得票数 22
我有一个父组件，它使用服务从api接收数据。我需要将此数据传递给子组件，因为我不想再次调用api (严格规则)。我可以访问父组件中的数据，但不能在子组件中获取数据。我试过很多不同的方法。
import { Component, OnInit, ViewChild } from '@angular/core';
import {ActivatedRoute} from "@angular/router";
import {SwapiService} from "../../models/swapi.service";
import {Starshi
浏览 9提问于2020-11-17得票数 0
3回答
我有两个组件: component1和component2
component1包含以下代码段
export class CpOne{
passedValue:number=null;
setValue(x){
this.passedValue = x;
}
}
组件2包含以下代码段
import { CpOne } from './component1'
export class CpTwo{
constructor(private cp : CpOne){}
}
我想要实现的是，以某种方式在component2中调用compon
浏览 2提问于2016-07-20得票数 0
2回答
我正试图将一个值从parent-component传递给他的嵌套child-component (角1.5 )
该值可以从父级更新，但子值不能编辑，只需显示。那么，单向绑定“<”是对的吗？
而且我不能在父组件声明中传递子组件，因为父组件也有其他用途。
关键是我的父组件存储了公共数据，但是他们的孩子会以不同的方式使用它。
父组件将被多次使用，有不同的子组件，这就是为什么我不能在父声明中传递子组件的原因。我需要绑定信息，以便自动更新，当父母更新数据时，必须由孩子反映。
HTML
<parent-component ng-transclude>
<child-co
浏览 4提问于2016-08-17得票数 1
我的理解是，我可以使用指令@Input()将数据传递给子组件，并使用@Output()和适当的发射将数据发送回父组件。但是，我不知道@ But ()字段中的更改数据将被发送到父字段。这是正确的吗？
我修改了组件通信工作簿以再现这个。
你能解释一下吗？
谢谢,
浏览 5提问于2020-05-29得票数 6
回答已采纳
1回答
在Angular2+中，对于绑定问题有简单的解决方案，我们可以在各种输入和自定义控件上进行双向绑定，但在我看来，reactJs支持单向绑定问题。请描述在ReactJs中双向绑定的最佳实践。
浏览 0提问于2019-02-24得票数 0
回答已采纳
所以我得到了下面这段令人惊叹的代码。但我只有一个关于这条线的问题
.subscribe(this.incrementingDisplay.display$);
这会将值推入
@Output() display$ = new Subject()
效果很好..。但是，我想知道它为什么会工作，因为display$是一个@输出，那么它如何接收来自this.incrementingDisplay.display$的输入
再一次，一切都在工作，只是试图理解它应该是一个@输入，而不是显示的@输出
代码如下：
console.clear();
import {Component, Output, ViewC
浏览 0提问于2016-06-16得票数 1
我需要在我的RolesComponent中检查这个加载的变量是真还是假。
但是我得到了这个错误：
ERROR TypeError: Cannot read property 'loaded' of undefined
这些是我尝试过的代码
用户
@Component({
selector: 'app-users',
templateUrl: './users.component.html',
styleUrls: ['./users.component.css']
})
export class Users
浏览 3提问于2018-10-24得票数 1
使用Angular 7， 我有一个组件，它有一个输入属性，它是一个对象，它询问一些信息。 <app-details [item]="whatGoeHere" key="firstName"></app-details> 在组件中，我有一个输入属性，如下所示... export class DetailsComponent implements OnInit{
@Input() item: any;
@Input() key: string;
ngInit(){
if(this.item &
浏览 28提问于2019-03-14得票数 4
回答已采纳
将代码转换为子组件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
回答已采纳
如何在Angular 2应用程序中的两个组件之间发送数据考虑：-两个组件在两个不同的路由上(因此，唯一共享的组件是根组件)
我已经设法：-使用共享服务或Singleton然而，我如何触发从第一个组件到另一个组件的事件(位于另一个路由中)
我已经设法使用root之前的最后一个组件的输出来触发事件(但不涉及root-app组件)
任何帮助，链接，线索，感谢！
<div class="wrapper">
<div class="tasks-list">
<router-outlet></router-outlet
浏览 15提问于2016-07-24得票数 0
一段时间以来，我一直在寻找一种解决办法。我尝试了一系列来自“输入”、“查询”、“dynamicContentLoader”、“@Inject”、“@Inject”(forwardRef(()的不同内容，但还没有弄清楚这一点。
我的示例结构：
parent.ts
import {Component} from 'angular2/core';
@Component({
selector : 'my-app',
directives : [Child],
template : `<parent-component><
浏览 0提问于2016-02-26得票数 2
回答已采纳
我是Angular的新手，这里有一个问题:我想将这个service+component中的数据传递给另一个组件。
我有一个服务可以做到这一点：
getRecs() {
let recsSub = new Subject<any>();
let recsSubObservable = from(recsSub);
this.socket.on('recs', (recsStatus: any) => {
recsSub.next(recsStatus);
});
return recsSubObservabl
浏览 1提问于2018-08-01得票数 0
我正在升级一个大型的Angular 1.6应用程序，我们有许多组件使用'require‘来访问父组件的控制器。AngularJS组件如下所示：
var tileTextbox = {
template: '<ignore>',
controller: TileTextboxController,
bindings: {
field: '<',
notifyError: '&',
context
浏览 3提问于2018-11-30得票数 2
1回答
父组件
import { Component, OnChange } from '@angular/core';
import { ChildComponent } from '../../reusable/user-offers/user-offers.component';
@Component({
...
directives: [ ChildComponent ]
})
export class ParentComponent implements OnChange {
@ViewChild(ChildComponent)
priva
浏览 0提问于2016-07-14得票数 1
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
回答已采纳
import { Component, Input, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FetchService } from '../fetch. Service';
@Component({
selector: 'app-first',
templateUrl: './first.component.html',
styleUrls: ['./first.com
浏览 6提问于2021-05-10得票数 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
回答已采纳
2回答
上下文：
处理具有内联编辑功能的通用数据表。
组件：
数据-table.Component.(ts\html/css)
过程：
这是一个通用数据表，只需传递要显示的列和行即可使用。
它有一些单元格的内联编辑功能。
在编辑完成后，事件将被发送到功能组件(父组件)。
处理保存数据的业务逻辑取决于功能组件(父组件)。
问题：
-保存是一个异步过程，保存完成后，如果保存成功或失败，如何将确认响应发送回数据表组件?
谢谢
浏览 1提问于2018-12-12得票数 0
1回答
我被困在一个地方，我试图用id将自定义元素事件调用到角元素中
例如：
angularElement.html
<custome-element id="elementId"></custome-element>
AngularElement.Ts
import {
Component,
} from '@angular/core';
@Component({
selector: 'angular-element',
templateUrl: './angular-element.compo
浏览 3提问于2022-02-28得票数 0
我使用角度Slickgrid来显示标签内的表格数据。我有一个html页面，其中两个选项卡是静态的，它也正确地显示数据，其他选项卡是从后面的一个专用选项卡动态创建的，它基本上是从输入中构建一个查询，当您保存该选项卡时，它将创建一个新的选项卡，在第二个选项卡之后追加它，并将查询发送到新生成的选项卡，该选项卡将使用给定的查询从服务中获取记录。我正在成功地从服务中获取数据，但该表没有显示任何内容，甚至没有显示表标题。以下是代码：
父html：
<tabset #tabsetId>
<tab heading="heading1" id="1
浏览 0提问于2019-05-15得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
