Здесь используется Angular 6. У меня есть страница с двумя дочерними компонентами. Первый имеет 2 ввода текста, а второй имеет один раскрывающийся список. Мой родительский компонент просто нажимает кнопку.
Я знаю, что могу использовать Eventemitter для своего дочернего компонента и передать значение моему родителю, но как мне передать значение от моего дочернего элемента, если нет событий нажатия кнопки. Я попытался использовать ViewChild, который работает, но есть задержка до полной загрузки представления. Я использую ViewChild, как показано ниже:
--Родитель--
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ChildComponent } from "../child/child.component";
@Component({
selector: 'app-parent',
template: `
Message: {{ message }}
<app-child></app-child>
`,
styleUrls: ['./parent.component.css']
})
export class ParentComponent implements AfterViewInit {
@ViewChild(ChildComponent) child;
constructor() { }
message:string;
ngAfterViewInit() {
this.message = this.child.message
}
}
--Ребенок--
import { Component} from '@angular/core';
@Component({
selector: 'app-child',
template: `
`,
styleUrls: ['./child.component.css']
})
export class ChildComponent {
message = 'Hola Mundo!';
constructor() { }
}
Я взял вышеуказанный экс от https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/
Может ли кто-нибудь предоставить информацию о том, как я могу добиться передачи/чтения данных от ребенка без необходимости использовать какое-либо нажатие кнопки/излучатель.
--Обновлено--
--Ребенок--
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'ct-child',
templateUrl: './child.html'
})
export class ChildComponent implements OnInit {
childmessage: string = "Child Message!"
constructor() { }
ngOnInit() {}
}
--Родитель--
import { Component, OnInit} from '@angular/core';
@Component({
selector: 'ct-parent',
templateUrl: './parent.html'
})
export class ParentComponent implements OnInit {
constructor() { }
message: string;
getDataFromChild(child1): void {
this.message = child1.message;
}
ngOnInit() {}
}
--Родительский HTML--
Message: {{message}}
<ct-child #child1></ct-metadata>
<button type = "button" (click) = "getDataFromChild(child1)">Click Me!</button>
Я пробовал выше в соответствии с комментариями, но это не работает.
@AnjilDhamala My Parent имеет событие нажатия кнопки, когда пользователь нажимает кнопку, я хочу прочитать значение 2 текстового поля из первого дочернего компонента и прочитать раскрывающееся значение из второго дочернего компонента. Например, в сообщении выше, как передать значение сообщения, которое находится в моем дочернем компоненте, моему родительскому компоненту.
@Pvl у нас действительно есть обработчик событий?
Вы всегда можете создать общую службу данных, из которой все компоненты смогут извлекать и хранить данные.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Вы разговариваете со своим ребенком через @Input() и отвечаете родителям с помощью @Output.
В вашем примере вы получаете сообщение от ребенка с помощью @Output.
Вот ваш дочерний компонент.
import { Component} from '@angular/core';
@Component({
selector: 'app-child',
template: `
`,
styleUrls: ['./child.component.css']
})
export class ChildComponent implements AfterViewInit {
@Output() messageChanged: EventEmitter<string>();
message = 'Hola Mundo!';
constructor() {
this.messageChanged = new EventEmitter<string>();
}
ngAfterViewInit() {
this.messageChanged.next(this.message);
}
}
Вот как должен выглядеть ваш родитель.
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
Message: {{ message }}
<app-child (messageChanged) = "onMessageChange($event)"></app-child>
`,
styleUrls: ['./parent.component.css']
})
export class ParentComponent {
constructor() { }
message:string;
onMessageChange(message: string) {
this.message = message;
}
}
Если вы просто хотите передать некоторые данные, как показано в вашем примере, вы можете сделать так
Message: {{ child.message }}
<app-child #child></app-child>
@karen, <ct-child #child1></ct-metadata>, вы можете попробовать еще раз после исправления этой опечатки?
Итак, я отладил его и вижу, что в моей функции getDataFromChild child1.message действительно есть текст «Дочернее сообщение!». Но когда я пытаюсь присвоить его this.message = child1.message, он говорит, что this.message не определено. Что-то не так с этим? Извините, я только начинаю работать с angular, так что это может быть просто.
@karen, this.message = child1.message; нужно вызывать после ngViewInit
Из того, что я понял после прочтения вашего поста и комментариев ниже, у вас есть структура как следует в вашем parent.component.html
<app-child1></app-child1>
<app-child2></app-child2>
<button type = "button">Click Me!</button>
Когда вы нажимаете кнопку, вы хотите получить данные от дочернего элемента1 и дочернего элемента2 в родительский компонент.
Таким образом, один из способов решить эту проблему - использовать ссылочную переменную шаблона,
<app-child1 #child1></app-child1>
<app-chidl2 #child2></app-child2>
<button type = "button" (click) = "getDataFromChild(child1,child2)">Click Me!</button>
Внутри вашего родительского машинописного текста
getDataFromChild(child1,child2) {
dataFromChild1 = child1.getData();
dataFromChild2 = child2.getData();
}
Добавьте метод getData() в ts компонента child1 и child2 и верните необходимые данные.
это не работает. Смотрите мой обновленный код, который я использовал.
вы получаете доступ к свойству сообщения дочернего элемента, которого там нет. Вы пробовали child1.childmessage?
Я поместил ваш код в stackblitz, stackblitz.com/edit/… Он работает нормально. Когда вы нажмете кнопку, вы получите данные в родительском компоненте.
@Output не является событием нажатия кнопки. Что вы пытаетесь отправить обратно от ребенка?