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

Question

Используя Angular 6 здесь.У меня есть страница, которая имеет около 2 дочерних компонентов.Первый имеет 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>

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

Answer 1

Если вы просто хотите передать некоторые данные, как показано в вашем примере, вы можете сделать это

 Message: {{ child.message }}
 <app-child #child></app-child>

Answer 2

Из того, что я понял после прочтения вашего поста и комментариев ниже, у вас есть следующая структура в parent.component.html

 <app-child1></app-child1>
 <app-child2></app-child2>
 <button type="button">Click Me!</button>

Когда вы нажимаете на кнопку, вы хотите получить данныеиз child1 и child2 в родительский компонент.

Таким образом, один из способов решить эту проблему - использовать ссылочную переменную шаблона,

<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 () как в child1, так и в child1TS компонента child2 и вернуть необходимые данные.

Answer 3

Вы разговариваете со своим ребенком по @Input() и разговариваете с родителями по @Output.

. Например, вы получаете сообщение от ребенка, используя @Output.

* 1007.* Вот ваш дочерний компонент.

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;
  }
}