站长家园(原代码之家)(www.adminjie.com)网站源码,微信源码,游戏源码,商业源码分享平台。
当前位置:网站首页 技术文章 网络编程 正文

聊聊angular中进行内容投影的方法

时间:2022-05-13 [网络编程]作者:fabuyuan 浏览:5 次

本篇文章带大家聊聊angular中的内容投影,介绍一下使用ng-content进行内容投影的方法,并了解有条件内容投影的实现方法,希望对大家有所帮助!

一、 ng-content 进行内容投影

1.1 ng-content

ng-content 元素是一个用来插入外部或者动态内容的占位符。父组件将外部内容传递给子组件,当 Angular 解析模板时,就会在子组件模板中 ng-content 出现的地方插入外部内容。【相关教程推荐:《angular教程》】

我们可以使用内容投影来创建可重用的组件。这些组件有相似的逻辑和布局,并且可以在许多地方使用。一般我们在封装一些公共组件的时候经常会用到。

1.2 为什么使用内容投影

定义一个 button 组件:

button-component.ts

@Component({
    selector: '[appButton]',
    template: `
    <span class="icon-search"></span>
`
})
export class AppButtonComponent {}

这个 button 组件的目的是在按钮内部加一个搜索的图标,我们实际使用如下:

<button appButton>click</button>

我们发现组件只会展示搜索图标, 按钮的文本不会展示,能你会想到最常使用的 @Input 装饰器,但是如果我们不只是想传文本进来,而是传一段 html 进来呢?此时就会用到 ng-content

1.3 单插槽内容投影

内容投影的最基本形式是单插槽内容投影

单插槽内容投影是指创建一个组件,我们可以在其中投影一个组件。

以 button 组件为例,创建一个单槽内容投影:

button-component.ts

@Component({
    selector: '[appButton]',
    template: `
    <span class="icon-search"></span> <ng-content></ng-content>
`
})
export class AppButtonComponent {}

实际使用如下:

<button appButton>click</button>

可以发现,现在这个 button 组件的效果是即显示了搜索图标,又显示了按钮的文本(click)。即把 <button appButton></button> 中间的内容 投影 到了组件的 <ng-content></ng-content> 位置。

ng-content 元素是一个占位符,它不会创建真正的 DOM 元素。ng-content 的那些自定义属性将被忽略。

1.4 多插槽内容投影

一个组件可以具有多个插槽,每个插槽可以指定一个 CSS 选择器,该选择器会决定将哪些内容放入该插槽。该模式称为多插槽内容投影。使用此模式,我们必须指定希望投影内容出现在的位置。可以通过使用 ng-contentselect 属性来完成此任务。

  • 组件模板含有多个ng-content 标签。
  • 为了区分投影的内容可以投影到对应 ng-content 标签,需要使用 ng-content 标签上的 select 属性作为识别。
  • select 属性支持标签名属性CSS 类 :not 伪类的任意组合。
  • 不添加 select 属性的 ng-content 标签将作为默认插槽。所有未匹配的投影内容都会投影在该 ng-content 的位置。

以 button 组件为例,创建一个多槽内容投影:

button-component.ts

@Component({
    selector: '[appButton]',
    template: `
    <span class="icon-search"></span> <ng-content select="[shuxing]"></ng-content> <ng-content select="p"></ng-content> <ng-content select=".lei"></ng-content>
`
})
export class AppButtonComponent {}

实际使用如下:

<button appButton>
<p>click</p> <span shuxing>me</span> <span class="lei">here</span>
</button>

1.5 ngProjectAs

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

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

@Component({
    selector: 'app-card',
    template: `
		<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>
`
})
export class AppCardComponent {}

使用:

<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 部分并没有被渲染到我们想要渲染的插槽中,而是渲染到了没有提供任何 selectorng-content 中。
在这种情况下,我们可以使用 ngProjectAs 属性。
在上面的 ng-container 加上这个属性,就可以按照我们的期望来渲染了。

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

二、 有条件的内容投影

如果你的元件需要有条件地渲染内容或多次渲染内容,则应配置该元件以接受一个 ng-template 元素,其中包含要有条件渲染的内容。

在这种情况下,不建议使用 ng-content 元素,因为只要元件的使用者提供了内容,即使该元件从未定义 ng-content 元素或该 ng-content 元素位于 ngIf 语句的内部,该内容也总会被初始化。

使用 ng-template 元素,你可以让元件根据你想要的任何条件显式渲染内容,并可以进行多次渲染。在显式渲染 ng-template 元素之前,Angular不会初始化该元素的内容。

2.1 ng-container

既不是一个组件,也不是一个指令,仅仅是一个特殊的tag而已。 使用 ng-container 渲染所包含的模板内容,不包含自身。

  • angular代码片段
<div>
  <ng-container>
    <p>My name is wyl.</p>
    <p>What is you name?</p>
  </ng-container>
</div>
  • 浏览器调试窗口,可以发现 <ng-container> 标签消失了,并没有起任何作用
<div>
  <p>My name is wyl.</p>
  <p>What is you name?</p>
</div>
  • 使用场景,如下,在我们需要遍历if 判断 时,它可以承担一个载体的作用
<ul>
  <ng-container *ngFor="let item of items">
    <li>{{ item .name}}</li>
    <li>{{ item .age}}</li>
    <li>{{ item .sex}}</li>
  </ng-container>
</ul>

另外,ng 中常见错误之一的 forif 不能写在同一标签上(在一个宿主元素上只能应用一个结构型指令),利用 ng-container 标签可以在实现功能的基础上减少层级的嵌套。

2.2 ng-template

先来看下面一段代码

<ng-template>
    <p> In template, no attributes. </p>
</ng-template>

<ng-container>
    <p> In ng-container, no attributes. </p>
</ng-container>

浏览器输出结果是:

In ng-container, no attributes.

<ng-template> 中的内容不会显示。当在上面的模板中添加 ngIf 指令:

<ng-template [ngIf]="true">
   <p> ngIf with a ng-template.</p>
</ng-template>

<ng-container *ngIf="true">
   <p> ngIf with an ng-container.</p>
</ng-container>

浏览器输出结果是:

ngIf with a ng-template.
ngIf with an ng-container.

2.3 ng-template<ng-container> 的配合使用

<ng-container *ngIf="showSearchBread; else tplSearchEmpty">
     暂时搜索不到您要的数据喔
</ng-container>
<ng-template #tplSearchEmpty>
     快快开始获取吧!
</ng-template>

2.4 ngTemplateOutlet

插入 ng-template 创建的内嵌视图。 ngTemplateOutlet 是一个结构型指令,接收一个 TemplateRef 类型的值;

<div *ngTemplateOutlet="tpl1"></div>
<ng-template #tpl1>
  <span>I am span in template {{title}}</span>
</ng-template>

*ngTemplateOutlet = "templateRefExp; content: contentExp "

  • templateRefExp: ng-template 元素的 #ID
  • contextExp:
    • 可空参数

    • content 是一个对象,这个对象可以包含一个 $implicitkey 作为默认值, 使用时在 模板 中用 let-key 语句进行绑定

    • content 的非默认字段需要使用 let-templateKey=contentKey 语句进行绑定

使用如下:

@Component({
  selector: 'ng-template-outlet-example',
  template: `
    <ng-container *ngTemplateOutlet="greet"></ng-container>
    <hr>
    <ng-container *ngTemplateOutlet="eng; context: myContext"></ng-container>
    <hr>
    <ng-container *ngTemplateOutlet="svk; context: myContext"></ng-container>
    <hr>
    <ng-template #greet><span>Hello</span></ng-template>
    <ng-template #eng let-name><span>Hello {{name}}!</span></ng-template>
    <ng-template #svk let-person="localSk"><span>Ahoj {{person}}!</span></ng-template>
`
})
class NgTemplateOutletExample {
  myContext = {$implicit: 'World', localSk: 'Svet'};
}

2.5 利用 ngTemplateOutlet 进行内容投影

@Component({
    selector: 'app-card',
    template: `
		<div class="card">
		  <div class="header">
		  	<ng-container *ngTemplateOutlet="headerTemplate; context: { $implicit: title, index: otherDate }"></ng-container>
		  </div>
		</div>
`
})
export class AppCardComponent {

	@ContentChild('header', { static: true }) headerTemplate: TemplateRef<any>;

	public title = 'Test';
	public otherDate = {
	 	auth: 'me',
	 	name: 'appCard'
	};
}

使用

<app-card>
  <ng-template #header let-label let-item="otherDate">
    <h1>Angular</h1> {
} (Test) and {{otherDate | json}} ({auth: 'me', name: 'appCard'}) </ng-template> </app-card>

更多编程相关知识,请访问:编程教学!!

以上就是聊聊angular中进行内容投影的方法的详细内容,更多请关注站长家园其它相关文章!

本文标签:  AngularAngular.js

转载请注明来源:聊聊angular中进行内容投影的方法

本文永久链接地址:https://www.adminjie.com/post/12283.html

免责声明:

本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:

二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:

一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。

三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

更多精彩内容
  • VUE中V-IF条件判断改变元素的样式操作
  • Discuz如何解决安装时报错run_sql_error
  • 低版本VS项目在VS2019无法正常编译的问题
  • PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
  • Oracle数据库的实例/表空间/用户/表之间关系简单讲解
  • RSA2是啥?PHP-RSA2签名验证怎么实现?
  • 华为dubal20是什么型号
  • ana an00华为是什么型号
  • 电脑显示信号线无连接是什么意思
  • app是什么应用程序的简称
  • html5的标题标记一共有几个等级
  • html5中onclick是什么意思
  • 小程序大小超限除了分包还能怎么做?如何避免和解决大小限制?
  • vivov1818a是什么手机型号
  • 超清视效是什么意思
  • 站长家园(原代码之家)会员升级
  • 最新文章
    • 完全掌握java之String类

      完全掌握java之String类

      本篇文章给大家带来了关于java的相关知识,其中主要介绍了关于string类的相关问题,包括了字符串的常量池、字符串的不可变性等等相关内容,下面一起来看一下,希...
    • 简单学习Python字符和列表(实例详解)

      简单学习Python字符和列表(实例详解)

      本篇文章给大家带来了关于python的相关知识,其中主要介绍了关于字符和列表的相关问题,包括了字符串的输入输出、列表循环遍历、列表的增删改查以及列表的嵌套等等内...
    • 图文解析Redis线程模型

      图文解析Redis线程模型

      本篇文章给大家带来了关于Redis的相关知识,其中主要介绍了关于线程模型的相关问题,Redis它是一个单线程的,下面就一起来看一下,希望对大家有帮助。推荐学习:...
    • jquery怎么判断元素是否有子节点

      jquery怎么判断元素是否有子节点

      方法:1、用children()获取元素下的所有子节点,语法“元素对象.children()”,会返回一个包含子节点的jQ对象;2、用length检测子节点个数...
    • jquery对象访问的方法有哪些

      jquery对象访问的方法有哪些

      jquery对象访问的方法有:1、each(),可以遍历指定的jquery对象,语法“$.each(对象,回调函数)”;2、size(),可统计jquery对象...
    热门文章
    • VUE中V-IF条件判断改变元素的样式操作

      VUE中V-IF条件判断改变元素的样式操作

      这篇文章主要介绍了VUE中V-IF条件判断改变元素的样式操作,具有很好的参考价值,希望对大家有所帮助。一起跟随想过来看看吧...
    • Discuz如何解决安装时报错run_sql_error

      Discuz如何解决安装时报错run_sql_error

      问题环境VMware虚拟机Centos7.3PHP7.0MySQL8.0NGINX1.14Discuz3.4问题还原本地环境为PHP5.6+MySQL5.6在安...
    • 低版本VS项目在VS2019无法正常编译的问题

      低版本VS项目在VS2019无法正常编译的问题

      低版本VS项目在VS2019无法正常编译的问题这里指的编译并不准确,只是为了方便说明。后有(未安装),201?...
    • PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)

      PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)

      实现原理使用redis链表来做,因为pop操作是原子的,即使有很多用户同时到达,也是依次执行,推荐使用。实现步骤第一步,先将商品库存入队列/**.trigge...
    • Oracle数据库的实例/表空间/用户/表之间关系简单讲解

      Oracle数据库的实例/表空间/用户/表之间关系简单讲解

      完整的Oracle数据库通常由两部分组成:Oracle数据库和数据库实例。Oracle是一种数据库管理系统,是一种关系型的数据库管理系统。我们用这些高级权限账号...
    {label}