纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

Angular组件之投影 详解Angular组件之投影

starof   2021-05-24 我要评论
想了解详解Angular组件之投影的相关内容吗,starof在本文为您仔细讲解Angular组件之投影的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:angular,投影,下面大家一起来学习吧。

概述

运行时动态改变组件模版的内容。没路由那么复杂,只是一段html,没有业务逻辑。

ngContent指令将父组件模版上的任意片段投影到子组件上。

一、简单例子

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

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

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

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

效果:

子组件加样式:

.wrapper{
    background: lightgreen;
}

父组件加样式:

.wrapper{
    background: cyan;
}

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

子组件:

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

父组件:

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

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

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

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

在父组件模版中加一行:

<div [innerHTML]="divContent"></div>

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

divContent="<div>属性绑定绑innerHTML</div>";

效果

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

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

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

优先考虑ngContent指令


相关文章

猜您喜欢

  • Mybatis 一级缓存与二级缓存 Mybatis 一级缓存与二级缓存的实现

    想了解Mybatis 一级缓存与二级缓存的实现的相关内容吗,whhwch1986在本文为您仔细讲解Mybatis 一级缓存与二级缓存的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Mybatis,一级缓存与二级缓存,下面大家一起来学习吧。..
  • redis分布式锁 redis分布式锁之可重入锁的实现代码

    想了解redis分布式锁之可重入锁的实现代码的相关内容吗,_否极泰来在本文为您仔细讲解redis分布式锁的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:redis分布式锁,redis可重入锁,下面大家一起来学习吧。..

网友评论

Copyright 2020 www.moon-script.com 【月光下载】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式