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

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

Angular：无事件地从孩子那里获取数据

3 个答案: