我可以在Angular 2中從父母到孩子發送事件

Question

我已經在父類中提交了按鈕，即personDetails。

personDetails有許多人類。

每當我點擊提交按鈕，我想調用子類中的方法。

如何使用output從父母到孩子發出一種方法？

它很容易做到從小孩到家長。我想訪問子組件的html值，因此我需要從父到子發出一個事件。

Answer 1

您可以創建一個在您的父母和子女組件之間共享的服務，您可以在其中定義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

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

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(); 
    } 
} 

Answer 2

在childComponent.ts

@Input() private uploadSuccess: EventEmitter<boolean>; 

在ParentComponent.html

<app-gallery [uploadSuccess] = "uploadSuccess" > </app-gallery> 

在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; 
    } 
    this.uploadSuccess.emit(true); 
}