0

假设我有以下组件（我们称之为“MyModalComponent”）

我的模态组件

<div class="my-modal">
  <div class="my-modal-header">
    <ng-content select="modal-title></ng-content>
  </div>
  <div class="my-modal-body">
    <ng-content></ng-content>
  </div>
</div>

当我这样使用它时，它可以完美运行；

<my-modal>
  <h1 modal-title>I am a modal</h1>
  <div>
    And this is my body!
  </div>
</my-modal>
  • 标题在<div class="my-modal-header">div中呈现
  • 其余内容进入<div class="my-modal-body">div

但是，如果我将我的 html 包装到不同的组件中，则选择器投影不再起作用。

我的模态内容组件

<h1 modal-title>I am a modal</h1>
<div>
  And this is my body!
</div>

<my-modal>
  <my-modal-content></my-modal-content>
</my-modal>

现在所有的 html 代码都被渲染到 MyModalComponent 的“后备”<ng-content></ng-content>槽中（因此，在<div class="my-modal-body">div 内）。
在这种情况下，选择器似乎不再起作用。

这是“设计使然”，或者更确切地说，如果您将 html 标记直接放在 MyModalComponent 中，我如何确保它能够继续工作？

4

0 回答 0