时间戳

首页 > 解决方案 > 创建新组件时创建要重用的基础组件

javascript - 创建新组件时创建要重用的基础组件

问题描述

我正在整理一个有许多模态的应用程序。因为我不想重复模态的代码，所以我想组装一个具有最小结构的基础组件，然后使用该结构能够组装不同的模态并在里面携带我需要的东西（表单、文本、图片）

我想做的一个例子

<app-modal-base>
  <app-form></app-form>
<app-modal-base>

我希望你明白我在找什么。如果你不能，有人找到了替代解决方案？

谢谢

标签： javascriptangular

解决方案

在您的基本模式模板中，包含<ng-content></ng-content>标签。当您显示您的模态时，您可以按如下方式使用它：

<Modal>
  <div id="mydiv">
    <p> Simple paragraph </p>
    <form>...</form>
  </div>
</Modal>

模态将包含您在基本模态组件模板中标记<Modal></Modal>所在位置的标记之间包含的内容。<ng-content></ng-content>它看起来像：

template: `
  <div id="closeButton"></div>
  <ng-content></ng-content>
`

这些信息是从这个来源收集的，我似乎找不到关于这个的官方文档。你可能不得不尝试一下。

推荐阅读