primeng v2.0.6 p-dialog不是角度2.4.10中的模态

Question

我在角度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 = “真”

但模态不显示为模态。有什么建议吗？

非常感谢你的帮助，

恐龙

Answer 1

您可能想尝试更新PrimeNG版本。最新版本是4.0.2所以，因为你可能会有两个主要的更新，并且正在引入其他错误。

Answer 2

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

该项目缺少css库：

• primeng /资源/主题/ω-/ theme.css

• 字体真棒/ CSS /字体awesome.min.css

• primeng /资源/ primeng.min.css

希望这有助于某人。