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

Question

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

我试过@Output() 和@Input() 似乎找不到问题

Parent.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

Answer 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);
}