Portal 怎麽使用

Angular CDK 中的 Portal 是一个将组件注入到 DOM 中的工具。它可以让你将一个组件插入到应用的任意位置，而不必将该组件的模板嵌入到当前组件的模板中。使用 Portal 可以方便的实现诸如弹出框、下拉框等特殊的 UI 组件。

要使用 Portal，首先需要在组件的构造函数中注入 PortalService：

constructor(private portalService: PortalService) {}

然后，可以使用 create 方法创建一个 Portal，并将其插入到指定的容器中：

const container = document.getElementById('container');
const componentPortal = this.portalService.attachComponent(MyComponent, container);

这里，MyComponent 是要插入的组件，container 是插入的容器。attachComponent 方法会返回一个 ComponentPortal 对象，可以使用它来控制插入的组件。

除了 ComponentPortal，PortalService 还提供了 TemplatePortal 类，可以用来插入一个模板。例如：

const template = document.getElementById('template');
const context = {
  $implicit: 'Hello',
  name: 'World'
};
const templatePortal = this.portalService.attachTemplate(new TemplateRef(null, template), context, container);

这里，TemplateRef 是一个 Angular 内置的模板引用类，用于表示一个模板。context 是模板的上下文对象，用于传递数据给模板。attachTemplate 方法会返回一个 TemplatePortal 对象。

通过 Portal，我们可以实现更加灵活的 UI 组件，使其可以在应用的任意位置使用。但是，需要注意的是，由于 Portal 可以将组件嵌入到 DOM 中的任意位置，因此需要特别小心，避免出现意外的副作用。