角度:从Child1转到父母到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() {
  }
}

我上面遇到的问题是在上面的conscon2component中的valuefromchild1（）事件中。不确定这里缺少什么，或者我没有做什么正确的东西。我可以看到正确从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中的CC_11设置为空字符串

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

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

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

您也可以在此处检查@Input()

Answer 3

您不应该真正从孩子那里恢复价值，如果您提到的单击按钮方案是您想要的，您应该只发出一些东西来告诉父母，请告诉父母。单击，然后将数据传递给父母的两个孩子。关于输入和输出装饰器的不错文章，我目前正在为我办公室的开发人员创建一个微型教程。