[英]Emit event from parent to child
I have a Submit button in the parent component namely
personDetails .
我
button in the parent component namely
有一个Submit button in the parent component namely
personDetails .
personDetails has many
person` components. personDetails
has many
人的组件。 Whenever I click on the Submit button, I want to call a method in child component. 每当我点击Submit按钮时,我想调用子组件中的方法。
How can I emit an event from a parent to a child component using @Output
? 如何使用
@Output
从父组件向子组件发出事件?
Its easy to do it from the child to the parent. 它很容易从孩子到父母。 I want to access a value of the child component, hence I need to emit an event from parent to child.
我想访问子组件的值,因此我需要从父级发送一个事件到子级。
You can create one service which is shared between your parent and child component in which you can define Observable
so that you can subscribe to that Observable
from child and perform some action when you receive some value from parent. 您可以创建一个在父组件和子组件之间共享的服务,您可以在其中定义
Observable
以便您可以从子组订阅该Observable
,并在从父级接收某些值时执行某些操作。
//common.service.ts
import { Injectable, Inject } from '@angular/core';
import { Subject } from 'rxjs/Subject';
@Injectable()
export class CommonService {
private notify = new Subject<any>();
/**
* Observable string streams
*/
notifyObservable$ = this.notify.asObservable();
constructor(){}
public notifyOther(data: any) {
if (data) {
this.notify.next(data);
}
}
}
//parent.component.ts //parent.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import { CommonService } from './common.service';
@Component({
selector : 'parent',
templateUrl : './parent.html'
})
export class ParentComponent implements OnInit, OnDestroy {
constructor( private commonService: CommonService ){
}
ngOnInit() {
this.commonService.notifyOther({option: 'call_child', value: 'From child'});
}
}
//child.component.ts //child.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import { CommonService } from './common.service';
@Component({
selector : 'child',
templateUrl : './child.html'
})
export class ChildComponent implements OnInit, OnDestroy {
private subscription: Subscription;
constructor( private commonService: CommonService ){
}
ngOnInit() {
this.subscription = this.commonService.notifyObservable$.subscribe((res) => {
if (res.hasOwnProperty('option') && res.option === 'call_child') {
console.log(res.value);
// perform your other action from here
}
});
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
}
In childComponent.ts
在
childComponent.ts
@Input() private uploadSuccess: EventEmitter<boolean>;
Additionally in childComponent.ts
subscribe to the event: 另外在
childComponent.ts
订阅事件:
ngOnInit() {
if (this.uploadSuccess) {
this.uploadSuccess.subscribe(data => {
// Do something in the childComponent after parent emits the event.
});
}
}
In ParentComponent.html
在
ParentComponent.html
<app-gallery [uploadSuccess] = "uploadSuccess" > </app-gallery>
In ParentComponent.ts
在
ParentComponent.ts
private uploadSuccess: EventEmitter<boolean> = new EventEmitter();
onImageUploadSuccess(event) {
console.log('Image Upload succes');
if (event.code === 'OK' && this.maxUploadLimit > 0) {
this.galleryImagesCount = this.galleryImagesCount + 1;
this.maxUploadLimit = this.maxUploadLimit - 1;
}
// The parent emits the event which was given as `@Input` variable to the child-component
this.uploadSuccess.emit(true);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.