Прайм Модал не откроется - PullRequest
Новая
       31

Прайм Модал не откроется

0 голосов
/ 14 мая 2018

Я создал основной модальный NG в Angular 2. Он должен открываться при нажатии кнопки, которая вызывает метод toggleDeleteModalDisplay, приведенный ниже, но, похоже, он не открывается.Не уверен, что я делаю неправильно, потому что в моем коде есть другие модалы, которые в основном совпадают 

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

@Component({
    selector: 'delete-user',
    templateUrl: './delete-user.component.html',
    encapsulation: ViewEncapsulation.None,
})

export class DeleteUserComponent {

    public deleteModalDisplay : boolean = false;

    public toggleDeleteModalDisplay() : void {
           this.deleteModalDisplay = !this.deleteModalDisplay;
    }

}
<p-dialog [(visible)]="deleteModalDisplay" [width]="500"
          [draggable]="false" [modal]="true" [dismissableMask]="true"
          class="delete-user-modal">
    <p-header class="header-modal">
        Delete User
    </p-header>
</p-dialog>

import { DeleteUserComponent } from './delete-user/delete-user.component';


@Component({
    templateUrl: './manage-users.component.html',
    styleUrls: ['./manage-users.component.less'],
})
export class ManageUsersComponent {
    constructor(public deleteUserComponent: DeleteUserComponent) {}

    public deleteUser() : void {
      this.deleteUserComponent.toggleDeleteModalDisplay();
    }
 }

1 Ответ

0 голосов
/ 20 мая 2018

Похоже, что DeleteUserComponent, на который вы звоните toggleDeleteModalDisplay(), не тот, который на ваш взгляд. Если вы не передаете экземпляр вашего компонента в свой ManageUsersComponent, он внедряет новый через свой конструктор, который отличается от того, что вы видите.

Вместо внедрения DeleteUserComponent в конструктор, попробуйте использовать ViewChild : 

export class ManageUsersComponent {

    @ViewChild(DeleteUserComponent) deleteUserComponent: DeleteUserComponent;

    constructor() {}

    public deleteUser() : void {
      this.deleteUserComponent.toggleDeleteModalDisplay();
    }

 }
...