Угловые данные прохода от ребенка к родительскому

Question

Я изучаю/работаю над Угловым проектом, я много сделал, и я стараюсь делать все «правильно», поэтому теперь я хочу сделать следующее:

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

Answer 1

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

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

Затем вы имеете доступ к # childComponentRef.someVariable из вашего родительского шаблона. В противном случае я думаю, что команда Angular рекомендует использовать общие службы. В любом случае они немного более универсальны. См

Answer 2

Если вы хотите получить доступ к ребенку компонент синхронно, то это может быть хорошей практикой использовать 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 3

Зарегистрируйте 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); 
}