primeng v2.0.6 p-dialog 在 angular 2.4.10 中不是模态

Question

我在 angular 2.4.10 组件中使用 primeng 模态 v2.0.6:

以下是我的html模板：

    <section class="content-header">
    <h1>
        Dino 3D Viewer Experiment
    </h1>
</section>

<!-- Main content -->
<section #phone class="content">
    <button pButton id="screenshot" class="no-spinner" type="button" (click)="callAlert('screenshot')"
            label="screenshot"></button>
    <button pButton id="download" class="no-spinner" type="button" (click)="downloadStl()"
            label="download geometry"></button>
    <button pButton id="dialog" class="no-spinner" type="button" (click)="showDialog()"
            label="open modal"></button>
</section>

<p-dialog header="Godfather I" [(visible)]="display" modal="modal" width="300" [responsive]="true">
    <p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
        His beloved son Michael has just come home from the war, but does not intend to become part of his father's
        business.
        Through Michael's life the nature of the family business becomes clear. The business of the family is just
        like the head of the family,
        kind and benevolent to those who give respect,
        but given to ruthless violence whenever anything stands against the good of the family.</p>
    <p-footer>
        <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
            <button type="button" pButton icon="fa-close" (click)="display=false" label="No"></button>
            <button type="button" pButton icon="fa-check" (click)="display=false" label="Yes"></button>
        </div>
    </p-footer>
</p-dialog>

以下是我的component.ts文件：

@Component({
  selector: 'dino-viewer',
  templateUrl: './dino-viewer.html',
  styleUrls: ['./dino-viewer.component.css']
})
export class dinoViewerComponent {

    display: boolean;


    callAlert(aMessage) {
        alert(aMessage);
    }

    showDialog() {
        this.display = true;
    }
}

下面是不幸的结果：

经过一些阅读，我尝试将以下内容添加到元素中：

appendTo="body" appendTo="@body" appendTo="@(body)" appendToBody="true"

但是模态框没有显示为模态框。有什么建议吗？

非常感谢您的帮助，

恐龙

Answer 1

您可能想尝试更新您的 PrimeNG 版本。最新版本是 4.0.2，因此由于您是其背后的两个主要更新，因此可能会引入此错误和其他错误。

Answer 2

我找到了解决我自己问题的方法。

该项目缺少 css 个库：

primeng/resources/themes/omega/theme.css
font-awesome/css/font-awesome.min.css
primeng/resources/primeng.min.css

希望这对某人有所帮助。

primeng v2.0.6 p-dialog 在 angular 2.4.10 中不是模态

primeng v2.0.6 p-dialog is not a modal in angular 2.4.10

angular2-template

primeng

angular