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

您的@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() {
  }
}

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，然后将@Input() event中的ct-child2设置为空字符串

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

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

这将绑定到attr.部分指定的常规id属性。

您还可以检查@Input() here

Answer 3

无论如何，您都不应该真的从子级传递值，如果您提到的单击按钮方案是您想要的，您应该发出一些信息告诉父级该按钮被单击，然后将数据传递给子级父母两个。 Nice article on input and output decorators我目前正在为办公室中的开发人员创建这种情况的微型教程。

角度：将数据从child1传递到父代，再传递到child2

3 个答案: