blocks|key|1390588|text|编辑:这是通过事件发射器的方式，当数据发生变化或发出时，你需要在子组件中订阅它，更新值将显示在子组件或任何其他组件中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1390589|Event+emitter+Stackblitz|offset|length|1390590|共享服务|style|BOLD|1390591|SharedService
subject:+Subject<Object>;

Parent-Component
constructor(DataService:+DataService)
this.DataService.event.next(data);

Child-Component
constructor(DataService:+DataService)
this.DataService.event.subscribe((data)=>{
+++//emitted+event+with+updated+data
});|code-block|syntax|javascript|1390592|每当父组件使用next方法发出时，您都可以接收子组件或其他组件中的数据并对其执行操作。|1390593|entityMap|0|LINK|mutability|MUTABLE|url|https://stackblitz.com/edit/event-emitter-angular-6-maymxr?file=src/app/check-events/check-events.component.ts^0|0|0|O|0|0|0|4|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@$D|10|E|11|1|12]]|A|$]]|$1|F|3|G|5|6|7|13|8|@$D|14|E|15|H|I]]|9|@]|A|$]]|$1|J|3|K|5|L|7|16|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|17|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

<p>Edit : Here is the way via event emitter, you need to subscribe to it in child component when the data is changed or emitted, Updated values will be displayed in child or any other component.</p>
<p><a href="https://stackblitz.com/edit/event-emitter-angular-6-maymxr?file=src/app/check-events/check-events.component.ts" rel="nofollow noreferrer">Event emitter Stackblitz</a></p>
<p><strong>shared service</strong></p>
<pre><code>SharedService
subject: Subject&lt;Object&gt;;

Parent-Component
constructor(DataService: DataService)
this.DataService.event.next(data);

Child-Component
constructor(DataService: DataService)
this.DataService.event.subscribe((data)=&gt;{
   //emitted event with updated data
});
</code></pre>
<p>Whenever the parent emits using the next method, you can receive the data
in child or other component and act on it.</p>


blocks|key|2656264|text|有几种方法可以做到这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2656265|1.使用BehaviorSubject。|offset|length|style|CODE|2656266|当使用Reactive+Forms而不是ngModel时，这是最好的|2656267|子组件：|2656268|@Input()
data:+BehaviorSubject<T>;

form+=+new+FormGroup({
++title:+new+FormControl()
});

ngOnInit()+{
++this.form.valueChanges.subscribe(formData+=>+{
++++this.data.next({
++++++...this.data.value,
++++++...formData
++++});
++});
}|code-block|syntax|javascript|2656269|<div+[formGroup]="form">
++<input+[formControlName]="title">
</div>|2656270|父组件：|2656271|<child+[data]="data"></child>|2656272|data:+BehaviorSubject<T>;

buttonClicked()+{
++//+use+this.data.value
}|2656273|2.使用two-way+binding。|2656274|这仍然使用ngModel，但需要您自定义表单元素上使用的双向绑定以触发更新：|2656275|2656276|@Input()
data:+T;

@Output()
dataChange:+EventEmitter<T>;|2656277|<input+[model]="data.title"+(modelChange)="data.title+=+$event;+dataChange.next(data)">|2656278|2656279|<child+[(data)]="data"></child>|2656280|data:+T;

buttonClicked()+{
++//+use+this.data
}|2656281|你也可以混合和匹配它们，例如在ngModel上使用双向数据绑定，如2。，但将BehaviorSubject从父级传递到子级，如1。|2656282|entityMap|0|LINK|mutability|MUTABLE|url|https://angular.io/guide/reactive-forms|1|https://angular.io/guide/two-way-binding^0|0|4|F|0|K|7|3|E|0|0|0|0|0|0|0|0|4|F|1|0|5|7|0|0|0|0|0|0|0|12|F|0^^$0|@$1|2|3|4|5|6|7|1O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1P|8|@$D|1Q|E|1R|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|1S|8|@$D|1T|E|1U|F|G]]|9|@$D|1V|E|1W|1|1X]]|A|$]]|$1|J|3|K|5|6|7|1Y|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|1Z|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|N|7|20|8|@]|9|@]|A|$O|P]]|$1|S|3|T|5|6|7|21|8|@]|9|@]|A|$]]|$1|U|3|V|5|N|7|22|8|@]|9|@]|A|$O|P]]|$1|W|3|X|5|N|7|23|8|@]|9|@]|A|$O|P]]|$1|Y|3|Z|5|6|7|24|8|@]|9|@$D|25|E|26|1|27]]|A|$]]|$1|10|3|11|5|6|7|28|8|@$D|29|E|2A|F|G]]|9|@]|A|$]]|$1|12|3|K|5|6|7|2B|8|@]|9|@]|A|$]]|$1|13|3|14|5|N|7|2C|8|@]|9|@]|A|$O|P]]|$1|15|3|16|5|N|7|2D|8|@]|9|@]|A|$O|P]]|$1|17|3|T|5|6|7|2E|8|@]|9|@]|A|$]]|$1|18|3|19|5|N|7|2F|8|@]|9|@]|A|$O|P]]|$1|1A|3|1B|5|N|7|2G|8|@]|9|@]|A|$O|P]]|$1|1C|3|1D|5|6|7|2H|8|@$D|2I|E|2J|F|G]]|9|@]|A|$]]|$1|1E|3|-4|5|6|7|2K|8|@]|9|@]|A|$]]]|1F|$1G|$5|1H|1I|1J|A|$1K|1L]]|1M|$5|1H|1I|1J|A|$1K|1N]]]]

<p>There are a couple ways to do this.</p>
<h3>1. Use a <code>BehaviorSubject</code>.</h3>
<p>This would be best when using <a href="https://angular.io/guide/reactive-forms" rel="nofollow noreferrer">Reactive Forms</a> instead of <code>ngModel</code>:</p>
<p>Child Component:</p>
<pre class="lang-js prettyprint-override"><code>@Input()
data: BehaviorSubject&lt;T&gt;;

form = new FormGroup({
  title: new FormControl()
});

ngOnInit() {
  this.form.valueChanges.subscribe(formData =&gt; {
    this.data.next({
      ...this.data.value,
      ...formData
    });
  });
}
</code></pre>
<pre class="lang-html prettyprint-override"><code>&lt;div [formGroup]=&quot;form&quot;&gt;
  &lt;input [formControlName]=&quot;title&quot;&gt;
&lt;/div&gt;
</code></pre>
<p>Parent Component:</p>
<pre class="lang-html prettyprint-override"><code>&lt;child [data]=&quot;data&quot;&gt;&lt;/child&gt;
</code></pre>
<pre class="lang-js prettyprint-override"><code>data: BehaviorSubject&lt;T&gt;;

buttonClicked() {
  // use this.data.value
}
</code></pre>
<h3>2. Use <a href="https://angular.io/guide/two-way-binding" rel="nofollow noreferrer">two-way binding</a>.</h3>
<p>This still uses <code>ngModel</code>, but will require you to customize the two-way bindings you are using on form elements to trigger the update:</p>
<p>Child Component:</p>
<pre class="lang-js prettyprint-override"><code>@Input()
data: T;

@Output()
dataChange: EventEmitter&lt;T&gt;;
</code></pre>
<pre class="lang-html prettyprint-override"><code>&lt;input [model]=&quot;data.title&quot; (modelChange)=&quot;data.title = $event; dataChange.next(data)&quot;&gt;
</code></pre>
<p>Parent Component:</p>
<pre class="lang-html prettyprint-override"><code>&lt;child [(data)]=&quot;data&quot;&gt;&lt;/child&gt;
</code></pre>
<pre class="lang-js prettyprint-override"><code>data: T;

buttonClicked() {
  // use this.data
}
</code></pre>
<p>You could also mix &amp; match these, e.g. use two-way data binding on ngModel as in 2., but pass a <code>BehaviorSubject</code> from parent to child as in 1.</p>


<p>I have big object in my component, the properties in the object are bound to various components and inputs in the template:</p>
<pre><code>  constructor() {
    this.data = {
      identifier: null,
      isRequired: true,
      title: 'Untitled',
      type: this.fileTypes[0].name,
      description: '',
      //more code here
}

&lt;app-text-input [(model)]=&quot;data.title&quot; label=&quot;Title&quot; type=&quot;text&quot; variant=&quot;white&quot;&gt;
</code></pre>
<p>Since, all properties in <code>data</code> are bound with various input elements, the values in the object are kept updated. This component is child of another component.</p>
<p>The parent needs to have access to the <code>data</code> object when some event occurs (button click for example) on the parent. How do I achieve this? I know there are <code>@Ouptuts</code> but the event is happening on the parent not on child. Also, I'm not using any FormControl classes for now, do I need to implement that to achieve this?</p>


Notify changes in object to parent angular

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

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

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

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

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

我在我的组件中有一个大对象，对象中的属性绑定到模板中的各种组件和输入：  constructor() {    this.data = {      identifier: null,      isRequired: true,      title: 'Untitled',      type: this.file...

问将对象中的更改通知给父角度
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将对象中的更改通知给父角度EN