Como atualizar o componente pai do componente filho no Angular 2

Aakriti.G

Eu quero atualizar o componente pai quando o componente filho for atualizado. Eu estava tentando fazer isso usando o emissor de evento, mas estou usando a saída do roteador para chamar o componente filho. Não tenho ideia de como fazer isso.

Alguém pode me orientar sobre o que devo fazer para conseguir isso?

obrigado

Adeeb basheer

Você não pode atualizar diretamente o componente pai de um componente filho. Mas você pode criar um serviço que pode interagir de qualquer componente com qualquer outro componente, conforme abaixo.

Crie um arquivo communication.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class CommunicationService {
    constructor() { }

    private emitChangeSource = new Subject<any>();

    changeEmitted$ = this.emitChangeSource.asObservable();

    emitChange(data: {}) {
        this.emitChangeSource.next(data);
    }

}

No componente filho

import { Component } from '@angular/core';
import { CommunicationService } from './communication.service';

@Component({
    templateUrl: `./child.component.html`,
    styles: ['child.component.css']
})
export class ChildComponent{
    constructor(private _communicationService: CommunicationService) { }

    onSomething() {
        this._communicationService.emitChange({proprty: 'value'});
    }
}

No componente pai

import { Component } from '@angular/core';
import { CommunicationService } from './communication.service';

@Component({
    templateUrl: `./parent.component.html`,
    styles: ['./parent.component.css']
})

export class ParentComponent {    
    constructor( private _communicationService: CommunicationService ) { 
        _communicationService.changeEmitted$.subscribe(data => {
        // ...
        })
    }
}

Este artigo é coletado da Internet.

Se houver alguma infração, entre em [email protected] Delete.

editar em
0

deixe-me dizer algumas palavras

0comentários
loginDepois de participar da revisão

Artigos relacionados

Atualizar o componente filho do pai no Angular

Atualizar propriedade do componente pai do componente filho no Angular 2

Atualizar o título do componente pai do componente filho roteado no Angular 2

Como atualizar o estado do pai do componente filho no reactJS

roteador angular como chamar o componente filho do componente pai

Como obter o nome do componente Pai no componente Filho do angular 2?

como usar o componente do módulo pai no componente do módulo filho no angular2

Não é possível atualizar a vista do componente filho do pai no angular 2

Como posso passar os objetos do componente Pai para o componente Filho no Angular 2?

Como atualizar a visualização do componente pai quando os dados são obtidos do componente filho?

Atualizar o componente React pai do componente filho

Como atualizar o valor dos adereços do componente filho do componente pai?

Angular para atualizar a IU do componente filho reflete o valor para o componente pai

Como atualizar os dados do componente filho para o componente pai usando a API de contexto no react?

Como passar dados do componente filho para o pai [Angular]

Como passar dados do componente angular filho para o pai

Angular 2: Como definir o valor padrão do campo do componente pai para o componente filho?

Angular 2 passando dados do componente pai para o filho

como duplicar o template do componente filho dentro do pai no clique (angular2)

Como redefinir um campo no componente filho do componente pai - angular

como atualizar o componente vuejs do pai

Como acessar os valores do elemento HTML do componente filho no componente pai do angular2?

Como atualizar a matriz de estado pai do componente filho?

Como usar o ngModel do componente filho no componente pai?

Como usar o estado do componente filho no componente pai?

Como renderizar novamente o componente pai do componente filho

Evento Angular HostListener do componente filho para o componente pai

Como enviar objeto FormGroup como saída para o componente pai do componente filho n Angular

Angular 2 ngModel no componente filho atualiza a propriedade do componente pai