如何在Angular4中将html添加到弹出窗口

在Angular 4中，可以使用第三方库或自定义组件来实现将HTML添加到弹出窗口的功能。以下是一种常见的实现方式：

首先，安装并导入一个适用于Angular 4的弹出窗口库，例如ngx-bootstrap或ng-bootstrap。这些库提供了一些预定义的弹出窗口组件，可以方便地在Angular应用中使用。
在需要添加弹出窗口的组件中，导入所需的弹出窗口组件和相关的服务。
在组件的模板中，添加一个按钮或其他触发弹出窗口的元素，并绑定一个点击事件。
在组件的类中，定义一个方法来处理点击事件。在该方法中，使用弹出窗口服务打开一个弹出窗口，并将要显示的HTML内容作为参数传递给弹出窗口。
在弹出窗口组件中，接收传递的HTML内容，并在模板中将其显示出来。

下面是一个示例代码：

安装ngx-bootstrap库：

npm install ngx-bootstrap --save

在需要使用弹出窗口的组件中，导入所需的组件和服务：

import { Component } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  modalRef: BsModalRef;

  constructor(private modalService: BsModalService) {}

  openModal(template: any) {
    this.modalRef = this.modalService.show(template);
  }
}

在组件的模板中，添加一个按钮并绑定点击事件：

<button (click)="openModal(template)">Open Modal</button>

<ng-template #template>
  <!-- 这里可以添加要显示的HTML内容 -->
  <h1>Hello, World!</h1>
</ng-template>

创建一个弹出窗口组件，例如ModalComponent，并在其模板中显示传递的HTML内容：

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

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.css']
})
export class ModalComponent {
  @Input() content: string;
}

<div class="modal-body">
  <div [innerHTML]="content"></div>
</div>

以上代码中，使用了ngx-bootstrap库中的BsModalService和BsModalRef来实现弹出窗口的功能。点击按钮时，调用openModal方法打开一个弹出窗口，并将要显示的HTML内容传递给弹出窗口。弹出窗口组件ModalComponent接收传递的HTML内容，并在模板中使用innerHTML属性将其显示出来。

请注意，这只是一种实现方式，实际上还有其他方法可以在Angular 4中实现将HTML添加到弹出窗口的功能。具体选择哪种方法取决于项目需求和个人偏好。