Угловая передача данных от ребенка к родителю

Question

Я учусь / работаю над проектом Angular, я многое сделал и стараюсь делать вещи "правильно", так что теперь я хочу сделать следующее:

Я хочу получить переменную (выходную) из дочернего компонента в родительский компонент, но я не хочу использовать выходные данные, я не хочу слушать их, я хочу получать их всякий раз, когда это нужно родителям, что-то вроде child.getVariable() Я натолкнулся на одно сообщение, в котором говорилось, что я должен использовать childview, но вопрос был не таким, как у меня, поэтому я хочу знать, является ли хорошей практикой использование childview для получения данных от дочернего компонента или нет?

Answer 1

Вам нужен только доступ к переменной дочернего компонента из шаблона родителя? Если это так, вы можете использовать:

<child-component #childComponentRef></child-component>

Затем у вас есть доступ к #childComponentRef.someVariable из вашего родительского шаблона. В противном случае я думаю, что команда Angular рекомендует общие сервисы. В любом случае они немного более универсальны. См. https://angular.io/docs/ts/latest/cookbook/component-communication.html.

Answer 2

Зарегистрируйте EventEmitter в своем дочернем компоненте как @Output:

@Output() onDatePicked: EventEmitter<any> = new EventEmitter<any>();
Emit value on click:

public pickDate(date: any): void {
    this.onDatePicked.emit(date);
}

Прослушайте события в шаблоне вашего родительского компонента:

<div>
    <calendar (onDatePicked)="doSomething($event)"></calendar>
</div>

и в родительском компоненте:

public doSomething(date: any):void {
    console.log('Picked date: ', date);
}

Answer 3

Если вы хотите получить доступ к дочернему компоненту синхронно, то рекомендуется использовать ViewChild следующим образом:

import { CountryCodesComponent } from '../../components/country-codes/country-codes.component';
import { Component, ViewChild } from '@angular/core';

@Component({
    selector: 'signup',
    templateUrl: "signup.html"
})
export class SignupPage {
    @ViewChild(CountryCodesComponent)
    countryCodes: CountryCodesComponent;
    nationalPhoneNumber = '';

    constructor() {}

    get phoneNumber(): string {
        return '+' + this.countryCodes.countryCode + this.nationalPhoneNumber;
    }
}

Answer 4

Способы взаимодействия родителей с дочерними компонентами в Angular.

(i) Дочерний компонент предоставляет свойство EventEmitter, с помощью которого он генерирует события, когда что-то происходит. Родитель связывается с этим свойством события и реагирует на эти события.

(ii) Родительский компонент не может использовать привязку данных для чтения дочерних свойств или вызова дочерних методов. Вы можете сделать и то, и другое, создав ссылочную переменную шаблона для дочернего элемента, а затем ссылаться на эту переменную в родительском шаблоне.

(iii) Подход с использованием локальной переменной прост и легок. Но он ограничен, потому что соединение родитель-потомок должно выполняться полностью в родительском шаблоне. Сам родительский компонент не имеет доступа к дочернему.

(iv) Родитель и дети могут общаться через службу.

Для подробного объяснения вы можете обратиться к ссылке ниже:

Официальный сайт Angular - Связь компонентов