Модальность PrimeNG angular 2 не работает при вызове из другого компонента

У меня есть таблица со многими строками, определенными в компоненте, который я хочу добиться, чтобы при нажатии строки в таблице отображалось модальное окно (диалог). Поэтому я создал отдельный компонент для диалога, но он не работает.

код компонента таблицы здесь (соответствующие части)

import { SwatModalComponent } from '../swat-modal/swat-modal.component';

modal: SwatModalComponent;

  constructor(private alertService : AlertService) {
    if(alertService.filteredParam){
      //we have a filtered processAlertSwitchName
      this[alertService.filteredParam.name] = alertService.filteredParam.value;
      alertService.filteredParam = null;
    }
    this.registerEvents();
    this.modal = new SwatModalComponent();
  }

showModal() {
    this.modal.showDialog();
  }

Код диалога в основном скопирован из документа

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

import {DialogModule} from 'primeng/primeng';

@Component({
  selector: 'app-swat-modal',
  templateUrl: './swat-modal.component.html',
  styleUrls: ['./swat-modal.component.sass']
})
export class SwatModalComponent implements OnInit {

  display: boolean = false;

    showDialog() {
        this.display = true;
    }

  constructor() { }

  ngOnInit() {
  }

}

и html код здесь

<p-dialog header="Alert Dialog" [(visible)]="display" modal="modal" width="300" responsive="true">
    <header>
        Header content here
    </header>
    Content
    <footer>
        Footer content here
    </footer>
</p-dialog>

при отладке я вижу, что для атрибута отображения SwatModalComponent установлено значение true, но на экране не появляется модальное окно.


angular primeng
person naoru    schedule 13.01.2017    source источник
comment
Кстати, я использую последнюю версию Primeng 1.1.4.   -  person naoru    schedule 14.01.2017
comment
я пытаюсь использовать атрибут appendTo, но безуспешно   -  person naoru    schedule 20.01.2017
comment
Еще вопрос.....   -  person naoru    schedule 01.02.2017
comment
Прошло 5 лет... тот же баг ))) Отлично!   -  person Anton Pegov    schedule 29.11.2017

Ответы (2)


arrow_upward
1
arrow_downward

У меня была такая же проблема, у меня работает следующая двусторонняя привязка. Нет необходимости в общем обслуживании.

  1. Перехватите событие onAfterClose из базового диалогового окна.
  2. Определите выходное изменение EventEmitter.
  3. Создайте событие в обработчике onAfterClose.

Редактировать ДиалогКомпонент:

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

@Component({
  selector: 'edit-dialog',
  templateUrl: './edit-dialog.component.html',
  styleUrls: ['./edit-dialog.component.css']
})
export class EditDialogComponent implements OnInit {


  @Input() item: ItemClass; // you entity to edit
  @Input() visible: boolean = false;
  @Output() visibleChange:EventEmitter<any> = new EventEmitter();

  constructor() { }

  ngOnInit() {
  }

  afterHide() {
    this.visibleChange.emit(false);
  }
}

Шаблон:

<p-dialog header="Godfather I" [(visible)]="visible" (onAfterHide)="afterHide()" modal="modal" responsive="true">
    <p>Some content....</p>
        <p-footer>
            <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
                <button type="button" pButton icon="fa-close" (click)="visible=false" label="Cancel"></button>
                <button type="button" pButton icon="fa-check" (click)="visible=false" label="OK"></button>
            </div>
        </p-footer>
</p-dialog>

Затем вы можете использовать свой EditDialogComponent, создав экземпляр в шаблоне родительского компонента, а не в машинописном коде.

<edit-dialog [(visible)]="displayEditDialog" [item]="selectedItem"></edit-dialog>

В коде компонента вы можете вызвать диалоговое окно, установив для атрибута display значение true. Нет импорта, если требуется EditDialogComponent.

...  
    selectedItem: ItemClass; // selected by table

    changeItem() {
        this.displayEditDialog = true;
    }
...

Надеюсь это поможет.

person Falk Atmanspacher    schedule 16.03.2017

arrow_upward
0
arrow_downward

так что на случай, если кому-то поможет

создайте новый компонент для диалога и поместите его селектор в html-файл компонента-оболочки

<app-mac-dialog></app-mac-dialog>

теперь вам нужно какое-то событие для запуска этого компонента. Я использую общую службу с EventEmitter для передачи данных компоненту диалога и в основном превращаю его атрибут отображения в true

person naoru    schedule 13.02.2017