angular - 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() {
  }
}

标签： angular

Answer 1

您有一个@Input() event: string;，Child2Component但您没有在模板中输入任何内容<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() {
  }
}