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>

我已经按照 cmets 进行了上述尝试，但这不起作用。

Answer 1

如果您只想传递示例中所示的一些数据，您可以这样做

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

Answer 2

根据我在阅读您的帖子和下面的 cmets 后的理解，您的结构为 跟随在你的 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();
}

在 child1 和 child2 组件的 ts 中添加 getData() 方法并返回所需的数据。

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