将子级数据绑定到父级以显示模式弹出窗口答案

【问题标题】：Databinding Child To Parent to show a Modal Popup将子级数据绑定到父级以显示模式弹出窗口
【发布时间】：2019-06-14 15:45:18
【问题描述】：

尝试将布尔值传递给我的父组件以在点击时显示模式弹出窗口。 （Child.comp 中的 Click 事件/Parent.comp 中的 Modal PopUp） 父组件从未收到布尔值

我试过@Output() 和@Input() 好像没找到问题

父.comp.ts |用户资料

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

@Component({
  selector: 'app-user-profile',
  templateUrl: './user-profile.component.html',
  styleUrls: ['./user-profile.component.scss']
})
export class UserProfileComponent implements OnInit {

  constructor() {
  }

  ngOnInit() {
  }

  formPopupUser:boolean = false;

  setPopupActive(){
    this.formPopupUser = !this.formPopupUser;
  }
}

Parent.comp.html

<div class="modal" (formPopupUser)="setPopupActive()" [ngClass]="formPopupUser === true ? 'popupActive' : ''">
  <form class="modalContent">
    ....
  </form>
</div>

Child.comp.ts |用户信息

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

@Component({
  selector: 'app-user-info',
  templateUrl: './user-info.component.html',
  styleUrls: ['./user-info.component.scss']
})

export class UserInfoComponent implements OnInit {
  @Output() formPopupUser = new EventEmitter<boolean>();

  constructor() { }

  ngOnInit() {
  }

  userInfoNeeded:boolean = true;

  activatePopupUser() {
    this.formPopupUser.emit();
    console.log(this.formPopupUser);
    console.log('im clicked!');
  }

}

Child.comp.html

<div *ngIf="userInfoNeeded else userInfoAdjust">
    <button (click)="activatePopupUser()" id="createButton" type="button"><i class="fas fa-plus"></i>Gegevens vervolledigen</button>
  </div>

在父组件中接收布尔值，因此 ngClass(in Parent Comp) 在受尊重的模式弹出窗口中生成

【问题讨论】：

标签： angular

【解决方案1】：

您需要发出值并将$event 作为参数捕获。

在模板中：

(formPopupUser)="setPopupActive($event)"

在发送组件中：

activatePopupUser() {
    this.formPopupUser.emit(this.userInfoNeeded);
    console.log(this.formPopupUser);
    console.log('im clicked!');
}

在接收组件中：

setPopupActive(b: boolean){
    console.log(b);
}

【讨论】：

很抱歉，但这并不能解决我的问题：“EventEmitter”类型的参数不可分配给“boolean”类型的参数
我的错，我赶紧把变量越过了。 emit 的参数应该是 this.userInfoNeeded。答案已更新。

【解决方案2】：

您必须在父组件中使用子组件选择器，而不是那里的 'div' 标签。

在您的 Parent.comp.html 中

 <app-user-info class="modal" (formPopupUser)="setPopupActive()" [ngClass]="formPopupUser === true ? 'popupActive' : ''">
  <form class="modalContent">
    ....
  </form>
</app-user-info>

希望，这可以解决您的问题。

【讨论】：