Angular：将数据从 child1 传递到 parent 到 child2

Question

使用 angular6。

我有一个父组件和 2 个子组件。我正在尝试将数据从 child1 组件传递到 child2 组件，如下所示：

下面是我创建 @Output 的 child1 组件

--Child1--

import { Component, OnInit, Output, EventEmitter} from '@angular/core';

@Component({
  selector: 'ct-child1',
  templateUrl: './child1.component.html',
  styleUrls: ['./child1.component.css']
})
export class Child1Component implements OnInit {
   @Output() eventClicked: EventEmitter<any> = new EventEmitter();

   //Button click event on child - need to pass some values here, below is an example
   nextClicked() {
    this.eventClicked.emit('from clause');
  }
}

父组件下面监听child1

--Parent--

<form class="form-horizontal" role="form">
    <div class="row">
       <ct-child1 (eventClicked)="childEventClicked($event)"></ct-child1>
       <ct-child2></ct-child2>
    </div>
</form> 

import { Component, OnInit} from '@angular/core';

@Component({
  selector: 'ct-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit  {

public clickedEvent: string;

  childEventClicked(event) {
    this.clickedEvent = event;    
  }
}

最后是child2组件，它正在尝试监听值

--Child2--

import { Component, OnInit, Input  } from '@angular/core';

@Component({
  selector: 'ct-child2',
  templateUrl: './child2.component.html',
  styleUrls: ['./child2.component.css']
})
export class Child2Component implements OnInit {
  constructor() { }
  @Input() event: string;

  //Button click event on Child2 - But here this.event returns undefined
    ValueFromChild1() {
    alert(this.event);
  }

  ngOnInit() {
  }
}

我在上面面临的问题是在 Child2Component 中的 ValueFromChild1() 事件中，this.event 的值是未定义的。不知道这里缺少什么或者我没有做 正确的东西。我可以看到从 Child1 正确传递给父级的值，但无法在 child2 中获取该值。

谁能指出上面遗漏了什么？

不确定我是否应该创建一个单独的问题，但除此之外，您能否告诉我如何创建一个模型、填充它然后传递它，而不是像上面那样传递一个字符串。

谢谢

--更新代码--

--Child1--

import { Component, OnInit, Output, EventEmitter} from '@angular/core';
import { MyModel } from './data.model';

@Component({
  selector: 'ct-child1',
  templateUrl: './child1.component.html',
  styleUrls: ['./child1.component.css']
})
export class Child1Component implements OnInit {
   myModelData = {} as MyModel;
   @Output() eventClicked: EventEmitter<MyModel> = new EventEmitter();
   selectedDdlValue: string = '';
    dropDownChange() {
        if (this.selectedDdlValue == '') {
           this.eventClicked = null;
        }
    }

   //Button click event on child - need to pass some values here, below is an example
   nextClicked() {
    this.myModelData.ddlValue = this.selectedDdlValue;
    this.eventClicked.emit(this.myModelData);
  }
}


--Parent--

<form class="form-horizontal" role="form">
    <div class="row">
       <ct-child1 (eventClicked)="childEventClicked($event)"></ct-child1>
       <ct-child2 [event]="clickedEvent" *ngIf="clickedEvent"></ct-child2>
    </div>
</form> 

import { Component, OnInit} from '@angular/core';

@Component({
  selector: 'ct-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit  {

 public clickedEvent: string;

  childEventClicked(event) {
    this.clickedEvent = event;   
  }
}

--Child2--

import { Component, OnInit, Input  } from '@angular/core';
import { MyModel } from './data.model';

@Component({
  selector: 'ct-child2',
  templateUrl: './child2.component.html',
  styleUrls: ['./child2.component.css']
})
export class Child2Component implements OnInit {
  constructor() { }
     @Input() event: MyModel;


  ngOnInit() {
  }
}

Answer 1

您的Child2Component 上有一个@Input() event: string;，但您没有在模板<ct-child2></ct-child2> 中输入任何内容。

您的模板需要如下所示：

<ct-child2 [event]="clickedEvent"></ct-child2>

如果要将模型传递给子组件：

--YourModel.ts--

export class YourModel {
    foo: string;
}

--Child1--

import { Component, OnInit, Output, EventEmitter} from '@angular/core';

@Component({
  selector: 'ct-child1',
  templateUrl: './child1.component.html',
  styleUrls: ['./child1.component.css']
})
export class Child1Component implements OnInit {
   @Output() eventClicked: EventEmitter<YourModel> = new EventEmitter();

   //Button click event on child - need to pass some values here, below is an example
   nextClicked() {
    const model = new YourModel();
    model.foo = 'bar';
    this.eventClicked.emit(model);
  }
}

--Parent--

<form class="form-horizontal" role="form">
    <div class="row">
       <ct-child1 (eventClicked)="childEventClicked($event)"></ct-child1>
       <ct-child2></ct-child2>
    </div>
</form> 

import { Component, OnInit} from '@angular/core';

@Component({
  selector: 'ct-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit  {

public clickedEvent: YourModel;

  childEventClicked(event) {
    this.clickedEvent = event;    
  }
}


--Child2--

import { Component, OnInit, Input  } from '@angular/core';

@Component({
  selector: 'ct-child2',
  templateUrl: './child2.component.html',
  styleUrls: ['./child2.component.css']
})
export class Child2Component implements OnInit {
  constructor() { }
  @Input() event: YourModel;

  //Button click event on Child2 - But here this.event returns undefined
    ValueFromChild1() {
    alert(this.event);
  }

  ngOnInit() {
  }
}

Answer 2

通过@Input()，您基本上是在为您的组件创建一个新属性。但在你的情况下它是空的。您需要像这样绑定到@Input 属性。

<ct-child2 [event]="clickedEvent"></ct-child2>

或者

<ct-child2 event="{{clickedEvent}}"></ct-child2>

你也可以在这里使用条件

<ct-child2 [event]="clickedEvent !== undefined ? clickedEvent : ''"></ct-child2>

这将检查值是否为undefined，然后将ct-child2 中的@Input() event 设置为空字符串

[] 用于确定是否将某些属性用作此属性的值，例如，您几乎可以对每个属性执行此操作

<div [attr.id]="id"></div>

这将绑定到attr.部分指定的普通id属性。

您也可以查看@Input()here

Answer 3

无论如何，您实际上不应该将值从孩子那里传回，如果您提到的单击按钮场景是您想要的，您应该只发出一些东西来告诉父母按钮被点击，然后将数据传递给孩子来自父母的两个。 Nice article on input and output decorators我目前正在为我办公室的开发人员创建一个针对这种情况的微教程。