Angular: получение данных от дочернего элемента без события

Здесь используется 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>

Я пробовал выше в соответствии с комментариями, но это не работает.

@Output не является событием нажатия кнопки. Что вы пытаетесь отправить обратно от ребенка?

Anjil Dhamala 28.02.2019 20:57

@AnjilDhamala My Parent имеет событие нажатия кнопки, когда пользователь нажимает кнопку, я хочу прочитать значение 2 текстового поля из первого дочернего компонента и прочитать раскрывающееся значение из второго дочернего компонента. Например, в сообщении выше, как передать значение сообщения, которое находится в моем дочернем компоненте, моему родительскому компоненту.

Brenda 28.02.2019 21:01

@Pvl у нас действительно есть обработчик событий?

Brenda 28.02.2019 21:02

Вы всегда можете создать общую службу данных, из которой все компоненты смогут извлекать и хранить данные.

dmoore1181 28.02.2019 21:26
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
4
5 248
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Вы разговариваете со своим ребенком через @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>, вы можете попробовать еще раз после исправления этой опечатки?

ABOS 01.03.2019 14:55

Итак, я отладил его и вижу, что в моей функции getDataFromChild child1.message действительно есть текст «Дочернее сообщение!». Но когда я пытаюсь присвоить его this.message = child1.message, он говорит, что this.message не определено. Что-то не так с этим? Извините, я только начинаю работать с angular, так что это может быть просто.

Brenda 01.03.2019 15:16

@karen, this.message = child1.message; нужно вызывать после ngViewInit

ABOS 01.03.2019 15:53

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

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

Brenda 01.03.2019 14:45

вы получаете доступ к свойству сообщения дочернего элемента, которого там нет. Вы пробовали child1.childmessage?

emkay 01.03.2019 17:29

Я поместил ваш код в stackblitz, stackblitz.com/edit/… Он работает нормально. Когда вы нажмете кнопку, вы получите данные в родительском компоненте.

emkay 01.03.2019 18:16

Другие вопросы по теме