您的位置：首页 > 编程学习 > > 正文

angular怎么把组件用在根组件里（详解Angular组件之投影）

更多时间：2022-01-25 00:33:50 类别：编程学习浏览量：1025

angular怎么把组件用在根组件里

详解Angular组件之投影

1、子组件中使用<ng-content>指令来标记投影点

<li class="wrapper">
  <h2>我是子组件</h2>
  <li>这个li定义在子组件中</li>
  <ng-content></ng-content> 
</li>

2、父组件中把要投影到子组件的投影点的html片段写到子组件的标签中

<li class="wrapper">
  <h2>我是父组件</h2>
  <li>这个li定义在父组件中</li>
  <app-child2>
    <li>这个li是父组件投影到子组件中</li>
  </app-child2>
</li>

效果：

angular怎么把组件用在根组件里（详解Angular组件之投影）

子组件加样式：

.wrapper{
    background: lightgreen;
}

父组件加样式：

.wrapper{
    background: cyan;
}

angular怎么把组件用在根组件里（详解Angular组件之投影）

二、多个<ng-content>投影点

子组件：

<li class="wrapper">
  <h2>我是子组件</h2>
  <ng-content selecter=".header"></ng-content>
  <li>这个li定义在子组件中</li>
  <ng-content selecter=".footer"></ng-content> 
</li>

父组件：

<li class="wrapper">
  <h2>我是父组件</h2>
  <li>这个li定义在父组件中</li>
  <app-child2>
    <li class="header">这是页头，这个li是父组件投影到子组件中,title是{{title}}</li>
    <li class="footer">这是页脚，这个li是父组件投影到子组件中</li>
  </app-child2>
</li>

angular怎么把组件用在根组件里（详解Angular组件之投影）

页头和页脚被投影到子组件中，同时title也被投影过去。

父组件模版中投影内容中插值表达式只能绑定父组件中的属性，虽然内容会被投影到子组件中去。

三、Angular属性绑定的方式插入html

在父组件模版中加一行：

<li [innerHTML]="liContent"></li>

父组件中加一个liContent属性，内容就是一段html片段。

liContent="<li>属性绑定绑innerHTML</li>";

效果

angular怎么把组件用在根组件里（详解Angular组件之投影）

四、对比ngContent指令和属性绑定innerHTML方式

[innerHTML]是浏览器特定的API。

ngContent指令平台无关。可绑定多个投影点。

优先考虑ngContent指令

以上就是详解Angular组件之投影的详细内容，更多关于Angular组件之投影的资料请关注开心学习网其它相关文章！

标签：angular 投影

上一篇：python能把时间转化成毫秒级吗（python 获取毫秒数,计算调用时长的方法）

下一篇：mysql 索引举例（MySQL 各个索引的使用详解）

您可能感兴趣

angular怎么把组件用在根组件里（详解Angular组件之投影）