如何在angular 5中始终显示窗口的模式弹出中心

在Angular 5中，可以通过以下步骤来实现始终显示窗口的模态弹出居中：

首先，创建一个模态弹出组件。可以使用Angular Material中的Dialog组件或者自定义组件来实现。这个组件将作为弹出窗口的内容。
在需要触发弹出窗口的组件中，引入弹出窗口组件，并在需要的时候调用它。
在弹出窗口组件的样式文件中，设置弹出窗口的样式。可以使用CSS的flex布局来实现居中显示。
在弹出窗口组件的逻辑文件中，添加逻辑代码来控制弹出窗口的显示和隐藏。可以使用Angular Material的Dialog服务来实现。

下面是一个示例代码：

创建模态弹出组件（modal.component.ts）：

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

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.css']
})
export class ModalComponent {
  // 添加需要的逻辑代码
}

在需要触发弹出窗口的组件中，引入弹出窗口组件（app.component.ts）：

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { ModalComponent } from './modal.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(public dialog: MatDialog) {}

  openModal() {
    this.dialog.open(ModalComponent);
  }
}

设置弹出窗口的样式（modal.component.css）：

.modal {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  background-color: white;
  padding: 20px;
}

在弹出窗口组件的逻辑文件中，添加逻辑代码（modal.component.ts）：

import { Component } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.css']
})
export class ModalComponent {
  constructor(public dialogRef: MatDialogRef<ModalComponent>) {}

  close() {
    this.dialogRef.close();
  }
}

这样，当调用openModal()方法时，弹出窗口将始终居中显示在页面中。

请注意，以上示例中使用了Angular Material的Dialog组件来实现模态弹出窗口。如果你不想使用Angular Material，可以自己实现一个模态弹出窗口组件，并在其中添加相应的样式和逻辑代码。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云弹性伸缩（AS）。你可以在腾讯云官网上找到更多关于这些产品的详细信息和介绍。

腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm

腾讯云弹性伸缩（AS）：https://cloud.tencent.com/product/as