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

--Child--

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>

我已按照评论中的方法尝试，但这并不起作用。

- Brenda

---

@Output不是一个按钮点击事件。你想从子组件发送什么回来？ - Anjil Dhamala

@AnjilDhamala 我的父组件有一个按钮点击事件，当用户按下该按钮时，我想要从第一个子组件中读取2个文本框的值，并从第二个子组件中读取下拉菜单的值。例如，在上面的帖子中，我如何将我的子组件中的 message 值传递到我的父组件中。 - Brenda

@Pvl 我们真的有事件处理程序吗？ - Brenda

你可以创建一个共享数据服务，所有组件都可以从中获取数据并存储数据。 - dmoore1181

Answer 1

根据我阅读您的帖子和下面的评论所理解的，您在父组件的.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>

在您的父类型 TypeScript 中

getDataFromChild(child1,child2) {
  dataFromChild1 = child1.getData();
  dataFromChild2 = child2.getData();
}

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

- emkay

---

这个不起作用。请看我使用的更新代码。 - Brenda

您正在访问子级的消息属性，但该属性不存在。您是否尝试过child1.childmessage？ - emkay

我已将您的代码放在 StackBlitz 上，https://stackblitz.com/edit/angular-jtymjj?file=src%2Fapp%2Fapp.component.ts 。它能够正常工作。当您单击按钮时，您将会在父组件中获取到数据。 - emkay

Answer 2

如果你只想传递一些数据，就像你的例子所示，你可以这样做：

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

- ABOS

---

@karen，<ct-child #child1></ct-metadata>，请修复此拼写错误后再试一次。 - ABOS

所以我进行了调试，我可以看到在我的getDataFromChild函数中，child1.message确实有文本“Child Message！”。但是当我尝试将其分配给this.message = child1.message时，它会说this.message未定义。这有什么问题吗？抱歉，我刚开始学习angular，可能很基础。 - Brenda

@karen，在 ngViewInit 之后必须调用 this.message = child1.message;。 - ABOS

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

- Anjil Dhamala