浅谈Angular如何使用ng-content进行内容投影(2)-木庄网络博客

app.component.html

<app-card>
  <header>
    <h1>Angular</h1>
  </header>
  <div>Not match any selector</div>
  <content>One framework. Mobile & desktop.</content>
  <footer><b>Super-powered by Google </b></footer>
  <div>This text will not not be shown</div>
</app-card>

会发现两个 div 都没有渲染在页面中，为了解决这个问题，我们可以在组件中添加一个没有任何 selector 的 ng-content 标签。所有没办法匹配到任何其他插槽的内容都会被渲染在这个里面。

card.component.html

<div class="card">
  <div class="header">
    <ng-content select="header"></ng-content>
  </div>
  <div class="content">
    <ng-content select="content"></ng-content>
  </div>
  <div class="footer">
    <ng-content select="footer"></ng-content>
  </div>
  <ng-content></ng-content>
</div>

ngProjectAs

在某些情况下，我们需要使用 ng-container 把一些内容包裹起来传递到组件中。大多数情况是因为我们需要使用结构型指令像 ngIf 或者 ngSwitch 等。比如只有在某些情况下才向 card 组件传递 header。

在下面的例子中，我们将 header 包裹在了 ng-container 中。

<app-card>
  <ng-container>
    <header>
      <h1>Angular</h1>
    </header>
  </ng-container>
  <content>One framework. Mobile & desktop.</content>
  <footer><b>Super-powered by Google </b></footer>
</app-card>

由于 ng-container 的存在，header 部分并没有被渲染到我们想要渲染的插槽中，而是渲染到了没有提供任何 selector 的 ng-content 中。

在这种情况下，我们可以使用 ngProjectAs 属性。

在上面的 ng-container 加上这个属性，就可以按照我们的期望来渲染了。

<app-card>
  <ng-container ngProjectAs='header'>
    ...
</app-card>

更多编程相关知识，请访问：编程教学！！

以上就是浅谈Angular如何使用ng-content进行内容投影的详细内容，更多文章请关注木庄网络博客！

返回前面的内容

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » 浅谈Angular如何使用ng-content进行内容投影

浅谈Angular如何使用ng-content进行内容投影

ngProjectAs

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

相关推荐

评论