Question

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

我尝试了@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（在父组件中）

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

Answer 2

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

在您的Parent.comp.html
中

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

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

将孩子与父母绑定在一起以显示模式弹出窗口

2 个答案: