Question

我刚刚注意到PrimeNG的“确认对话框”的奇怪行为。在test.component.html中，有一个输入字段。它检查输入的值是否大于150。如果大于150，则在输入字段下方显示确认按钮（“请确认”）。单击它会显示一个对话框，显示是和否。

选择是或否后，确认按钮将消失。

现在是问题所在： 仅当在test.component.ts中直接调用确认方法时，消失才有效。我想将其提取到服务（customConfirmation.service.ts）中，但是消失在这里不起作用。你知道为什么吗？我完全不知道。（“ this.messagesWeightTest”和按钮消失不起作用。）

test.component.html

<div class="p-col-12 p-md-6 p-lg-5">
  Weight:
  <div class="ui-inputgroup">
    <input pInputText type="number" id="weight" name="weight" [(ngModel)]="newTest.testWeight"
           placeholder="---">
    <span class="ui-inputgroup-addon">kg</span>
  </div>

  <div *ngIf="validateIfWeightOutsideRange()">
    <div>
      <p-confirmDialog key="confirmWeightTest"></p-confirmDialog>
      <button type="button" (click)="confirmWeightTest()" pButton icon="pi pi-check"
              label="Please confirm!">
      </button>
      <p-messages [value]="messagesWeightTest"></p-messages>
    </div>
  </div>

</div>

似乎整个“接受”和“拒绝”都不起作用：

customConfirmation.service.ts

import {Injectable} from '@angular/core';
import {SessionService} from "./session.service";
import {ConfirmationService, Message} from "primeng/api";

@Injectable()
export class CustomConfirmationService {

    messagesWeightTest: Message[] = [];
    weightConfirmed: boolean = false;

    constructor(private confirmationService: ConfirmationService) {}

      confirmWeightTest() {

        this.confirmationService.confirm({
          message: 'Are you sure?',
          header: 'Confirmation',
          icon: 'pi pi-exclamation-triangle',
          key: 'confirmWeightTest',
          accept: () => {
            this.messagesWeightTest = [{
              severity: 'info', summary: 'Confirmed', detail: 'The input is correct.'}];
          this.weightConfirmed = true;
          },
          reject: () => {
            this.sessionService.newTest.testWeight = null;
        this.weightConfirmed = true;
          }
        });
      }
}

test.component.ts只是从服务中调用确认方法：

test.component.ts

import {Component, Injectable, Input, OnInit} from '@angular/core';
import {ConfirmationService, Message, SelectItem} from "primeng/api";
import {trigger, state, style, transition, animate} from '@angular/animations';
import {FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms";
import {CustomConfirmationService} from "../services/customConfirmation.service";
import {ValidationService} from "../services/validation.service";

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

@Injectable()
export class TestComponent implements OnInit {

 constructor(private fb: FormBuilder,
              private customConfirmationService: CustomConfirmationService,
              private confirmationService: ConfirmationService,
              private validationService: ValidationService) {

}

ngOnInit() {}

  // Confirmations for ConfirmDialogs

  confirmWeightTest() {
    this.customConfirmationService.confirmWeightTest();
  }

  // Validations for ConfirmDialogs --> work!

  validateIfWeightOutsideRange() {
    return !!this.validationService.validateIfWeightOutsideRange();
  }

同样，如果我将来自customConfirmation.service.ts的ConfirmWeightTest（）复制并粘贴到test.component.ts中，则一切正常。我还用另一个项目对此进行了测试。

如果您能告诉我这里发生了什么，我会很高兴。

另请参阅Prime-NG Confirm Dialog: Hide the Button after Confirmation

我已按照此问题的答案中的建议实施了所有操作。谢谢！

Answer 1

我创建了一个demo，并且一切正常

您需要在提供商中声明 CustomConfirmationService 并进行更新

<p-messages [(value)]="messagesWeightTest"></p-messages>

到

<p-messages [(value)]="customConfirmationService.messagesWeightTest"></p-messages>

Prime-NG确认对话框在服务中不起作用

1 个答案: