如何在 Angular 中使用 NgTemplateOutlet 创建可重用组件
简介
单一职责原则是指应用程序的各个部分应该只有一个目的。遵循这个原则可以使您的 Angular 应用程序更容易测试和开发。
在 Angular 中,使用 NgTemplateOutlet 而不是创建特定组件,可以使组件在不修改组件本身的情况下轻松修改为各种用例。
在本文中,您将接受一个现有组件并重写它以使用 NgTemplateOutlet。
先决条件
要完成本教程,您需要:
- 本地安装了 Node.js,您可以按照《如何安装 Node.js 并创建本地开发环境》进行操作。
- 一些关于设置 Angular 项目的熟悉程度。
本教程已使用 Node v16.6.2、npm v7.20.6 和 @angular/core v12.2.0 进行验证。
步骤 1 – 构建 CardOrListViewComponent
考虑 CardOrListViewComponent,它根据其 mode 在 'card' 或 'list' 格式中显示 items。
它由一个 card-or-list-view.component.ts 文件组成:
import {Component,Input
} from '@angular/core';@Component({selector: 'card-or-list-view',templateUrl: './card-or-list-view.component.html'
})
export class CardOrListViewComponent {@Input() items: {header: string,content: string}[] = [];@Input() mode: string = 'card';}
以及一个 card-or-list-view.component.html 模板:
<ng-container [ngSwitch]="mode"><ng-container *ngSwitchCase="'card'"><div *ngFor="let item of items"><h1>{{item.header}}</h1><p>{{item.content}}</p></div></ng-container><ul *ngSwitchCase="'list'"><li *ngFor="let item of items">{{item.header}}: {{item.content}}</li></ul>
</ng-container>
这是该组件的使用示例:
import { Component } from '@angular/core';@Component({template: `<card-or-list-view[items]="items"[mode]="mode"></card-or-list-view>
`
})
export class UsageExample {mode = 'list';items = [{header: 'Creating Reuseable Components with NgTemplateOutlet in Angular',content: 'The single responsibility principle...'} // ... more items];
}
该组件没有单一职责,也不够灵活。它需要跟踪其 mode 并知道如何在 card 和 list 视图中显示 items。它只能显示具有 header 和 content 的 items。
让我们通过使用模板将组件分解为单独的视图来改变这一点。
步骤 2 – 理解 ng-template 和 NgTemplateOutlet
为了让 CardOrListViewComponent 能够显示任何类型的 items,我们需要告诉它如何显示它们。我们可以通过给它一个模板来实现这一点,它可以用来生成 items。
模板将使用 <ng-template> 和从 TemplateRefs 创建的 EmbeddedViewRefs。EmbeddedViewRefs 代表具有自己上下文的 Angular 视图,是最小的基本构建块。
Angular 提供了一种使用这个从模板生成视图的概念的方法,即使用 NgTemplateOutlet。
NgTemplateOutlet 是一个指令,它接受一个 TemplateRef 和上下文,并使用提供的上下文生成一个 EmbeddedViewRef。可以通过 let-{{templateVariableName}}="contextProperty" 属性在模板上访问上下文,以创建模板可以使用的变量。如果未提供上下文属性名称,它将选择 $implicit 属性。
这是一个示例:
import { Component } from '@angular/core';@Component({template: `<ng-container *ngTemplateOutlet="templateRef; context: exampleContext"></ng-container><ng-template #templateRef let-default let-other="aContextProperty"><div>$implicit = '{{default}}'aContextProperty = '{{other}}'</div></ng-template>
`
})
export class NgTemplateOutletExample {exampleContext = {$implicit: 'default context property when none specified',aContextProperty: 'a context property'};
}
这是示例的输出:
<div>$implicit = 'default context property when none specified'aContextProperty = 'a context property'
</div>
default 和 other 变量由 let-default 和 let-other="aContextProperty" 属性提供。
第三步 – 重构 CardOrListViewComponent
为了使 CardOrListViewComponent 更加灵活,并允许它显示任何类型的 items,我们将创建两个结构型指令来作为模板。这些模板将分别用于卡片和列表项。
这是 card-item.directive.ts:
import { Directive } from '@angular/core';@Directive({selector: '[cardItem]'
})
export class CardItemDirective {constructor() { }}
这是 list-item.directive.ts:
import { Directive } from '@angular/core';@Directive({selector: '[listItem]'
})
export class ListItemDirective {constructor() { }}
CardOrListViewComponent 将导入 CardItemDirective 和 ListItemDirective:
import {Component,ContentChild,Input,TemplateRef
} from '@angular/core';
import { CardItemDirective } from './card-item.directive';
import { ListItemDirective } from './list-item.directive';@Component({selector: 'card-or-list-view',templateUrl: './card-or-list-view.component.html'
})
export class CardOrListViewComponent {@Input() items: {header: string,content: string}[] = [];@Input() mode: string = 'card';@ContentChild(CardItemDirective, {read: TemplateRef}) cardItemTemplate: any;@ContentChild(ListItemDirective, {read: TemplateRef}) listItemTemplate: any;}
这段代码将读取我们的结构型指令作为 TemplateRefs。
<ng-container [ngSwitch]="mode"><ng-container *ngSwitchCase="'card'"><ng-container *ngFor="let item of items"><ng-container *ngTemplateOutlet="cardItemTemplate"></ng-container></ng-container></ng-container><ul *ngSwitchCase="'list'"><li *ngFor="let item of items"><ng-container *ngTemplateOutlet="listItemTemplate"></ng-container></li></ul>
</ng-container>
这是该组件的使用示例:
import { Component } from '@angular/core';@Component({template: `<card-or-list-view[items]="items"[mode]="mode"><div *cardItem>静态卡片模板</div><li *listItem>静态列表模板</li></card-or-list-view>
`
})
export class UsageExample {mode = 'list';items = [{header: '使用 NgTemplateOutlet 在 Angular 中创建可重用组件',content: '单一职责原则...'} // ... 更多项];
}
通过这些更改,CardOrListViewComponent 现在可以根据提供的模板以卡片或列表形式显示任何类型的项。目前,模板是静态的。
我们需要做的最后一件事是通过为它们提供上下文来使模板变得动态:
<ng-container [ngSwitch]="mode"><ng-container *ngSwitchCase="'card'"><ng-container *ngFor="let item of items"><ng-container *ngTemplateOutlet="cardItemTemplate; context: {$implicit: item}"></ng-container></ng-container></ng-container><ul *ngSwitchCase="'list'"><li *ngFor="let item of items"><ng-container *ngTemplateOutlet="listItemTemplate; context: {$implicit: item}"></ng-container></li></ul>
</ng-container>
这是该组件的使用示例:
import { Component } from '@angular/core';@Component({template: `<card-or-list-view[items]="items"[mode]="mode"><div *cardItem="let item"><h1>{{item.header}}</h1><p>{{item.content}}</p></div><li *listItem="let item">{{item.header}}: {{item.content}}</li></card-or-list-view>
`
})
export class UsageExample {mode = 'list';items = [{header: '使用 NgTemplateOutlet 在 Angular 中创建可重用组件',content: '单一职责原则...'} // ... 更多项];
}
有趣的是,我们使用了星号前缀和微语法来实现语法糖。这与以下代码是相同的:
<ng-template cardItem let-item><div><h1>{{item.header}}</h1><p>{{item.content}}</p></div>
</ng-template>
就是这样!我们拥有了原始功能,但现在可以通过修改模板来显示任何我们想要的内容,而 CardOrListViewComponent 的责任更少了。我们可以向项上下文中添加更多内容,比如类似于 ngFor 的 first 或 last,或者显示完全不同类型的 items。
结论
在本文中,您将一个现有的组件重写,以使用 NgTemplateOutlet。
如果您想了解更多关于 Angular 的内容,请查看我们的 Angular 专题页面,了解相关练习和编程项目。
相关文章:
如何在 Angular 中使用 NgTemplateOutlet 创建可重用组件
简介 单一职责原则是指应用程序的各个部分应该只有一个目的。遵循这个原则可以使您的 Angular 应用程序更容易测试和开发。 在 Angular 中,使用 NgTemplateOutlet 而不是创建特定组件,可以使组件在不修改组件本身的情况下轻松修改为各种用例。 在本文…...
改进的yolo交通标志tt100k数据集目标检测(代码+原理+毕设可用)
YOLO TT100K: 基于YOLO训练的交通标志检测模型 在原始代码基础上: 修改数据加载类,支持CoCo格式(使用cocoapi);修改数据增强;validation增加mAP计算;修改anchor; 注: 实验开启weig…...
nginx 日志,压缩,https功能介绍
一, 自定义访问日志 (一)日志位置存放 1,格式 2, 级别 level: debug, info, notice, warn, error, crit, alert, emerg 3,示例 服务机定义 错误日志存放位置 客户机错误访问 查看错误日志 4ÿ…...
代码随想录三刷day17
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、力扣144. 二叉树的前序遍历二、力扣145. 二叉树的后序遍历三、力扣94. 二叉树的中序遍历四、力扣144. 二叉树的前序遍历无、力扣145. 二叉树的后序遍历六、…...
postcss-px-to-viewport include属性
包含include配置的(github):npm i https://github.com/evrone/postcss-px-to-viewport -S 包含include配置的(npm):npm i postcss-px-to-viewport-8-with-include -S 不包含包include配置的(npm):npm i postcss-px-to-viewport 看了一下这篇文…...
C++设计模式——抽象工厂模式
文章目录 抽象工厂模式的主要组成部分抽象工厂模式的一个典型例子抽象工厂模式用于其他场景抽象工厂模式与其他设计模式结合使用 C 中的抽象工厂模式是一种创建型设计模式,它主要用于处理对象家族的创建,这些对象之间可能存在一定的关联关系或属于相同的…...
Windows安装VNC连接工具并结合cpolar实现远程内网Ubuntu系统桌面
文章目录 前言1. ubuntu安装VNC2. 设置vnc开机启动3. windows 安装VNC viewer连接工具4. 内网穿透4.1 安装cpolar【支持使用一键脚本命令安装】4.2 创建隧道映射4.3 测试公网远程访问 5. 配置固定TCP地址5.1 保留一个固定的公网TCP端口地址5.2 配置固定公网TCP端口地址5.3 测试…...
Vue3 Hooks函数使用及封装思想
一、什么是Hooks函数? 想象一下,你在做饭,有一些调料你经常会用到,比如盐、酱油和辣椒。每次做饭时,你都会从柜子里拿出这些调料。如果你每次用完都把它们随便放在厨房的某个角落,下次做饭时就可能找不到它…...
YOLOv8改进涨点,添加GSConv+Slim Neck,有效提升目标检测效果,代码改进(超详细)
目录 摘要 主要想法 GSConv GSConv代码实现 slim-neck slim-neck代码实现 yaml文件 完整代码分享 总结 摘要 目标检测是计算机视觉中重要的下游任务。对于车载边缘计算平台来说,巨大的模型很难达到实时检测的要求。而且,由大量深度可分离卷积层构…...
华为s5720s-28p-power-li-ac堆叠配置
叠物理约束: • 连线推荐示意图选用产品子系列中固定的一款设备做示例,与选择产品时指定型号的外观可能不同。示意图主要用于让用户了解相同子系列设备可以用作堆叠的端口的位置,以及使用不同的连线方式时如何连接设备上的端口。因此…...
c# aes加密解密私钥公钥通钥
using System.Security.Cryptography; using System.Text; namespace EncryptTest { internal class Program { static void Main(string[] args) { Console.WriteLine("Hello, World!"); string 密 EncryptAESBASE64("你…...
上拉电阻与下拉电阻、电容的作用
上拉电阻与下拉电阻 在单片机电路中,上拉电阻和下拉电阻都是常见的电路元件,它们在数字电路设计中扮演着重要的角色。它们的作用如下: 1. **上拉电阻**: - **作用**:当一个引脚没有外部信号时,上拉电阻…...
《Spring Security 简易速速上手小册》第1章 Spring Security 概述(2024 最新版)
文章目录 1.1 Spring Security 的重要性1.1.1 基础知识详解1.1.2 主要案例:用户认证与授权1.1.3 拓展案例 1:OAuth2 社交登录1.1.4 拓展案例 2:JWT 认证 1.2 Spring Security 的核心特性1.2.1 基础知识详解1.2.2 主要案例:基于角色…...
vue页面菜单权限问题解决
带锚点的url,#后面部分后端获取不到. vue的页面是带有#的路由,#后端服务获取不到,只在浏览器端有用. URL 中的哈希符号 (#) 被用来作为网页中的 锚点 使用,锚点的含义就是页面中的某个特定的位置,这个位置可以被快速找到,很类似于在该位置抛…...
C++面试宝典第33题:数组组成最大数
题目 给定一组非负整数nums,重新排列每个数的顺序(每个数不可拆分)使之组成一个最大的整数。注意:输出结果可能非常大,所以你需要返回一个字符串而不是整数。 示例1: 输入:nums = [10, 2] 输出:"210" 示例2: 输入:nums = [3, 30, 34, 5, 9] 输出:"…...
“影像承载初心” 国际数字影像产业园2024首届摄影沙龙诚邀您的参与!
2024年2月29日,树莓集团总部国际数字影像产业园将举行“影像承载初心”2024首届摄影沙龙,活动现场邀请摄影业内大咖与专家共聚成都文创产业园,探讨摄影艺术及影像未来。诚邀您的参与! 国际数字影像产业园介绍: 国际数…...
【C语言】while循环语句
🎈个人主页:豌豆射手^ 🎉欢迎 👍点赞✍评论⭐收藏 🤗收录专栏:C语言 🤝希望本文对您有所裨益,如有不足之处,欢迎在评论区提出指正,让我们共同学习、交流进步&…...
2024数字中国创新大赛·数据要素赛道“能源大数据应用赛”正式上线!参赛指南请查收
近日,由国网福建电力承办的2024数字中国创新大赛能源大数据应用赛正式上线发布。赛事按照数字中国建设、能源革命的战略要求,围绕能源数据要素x、能源数字技术、能源商业模式等热点设置赛题,诚邀社会各界为加快建成新型电力系统出谋划策&…...
react-JSX基本使用
1.目标 能够知道什么是JSX 能够使用JSX创建React元素 能够在JSX中使用JS表达式 能够使用JSX的条件渲染和列表渲染 能够给JSX添加样式 2.目录 JSX的基本使用 JSX中使用JS表达式 JSX的条件渲染 JSX的列表渲染 JSX的样式处理 3.JSX的基本使用 3.1 createElement()的问题 A. …...
学习阶段单片机买esp32还是stm32?
学习阶段单片机买esp32还是stm32? 在开始前我有一些资料,是我根据网友给的问题精心整理了一份「stm32的资料从专业入门到高级教程」, 点个关注在评论区回复“888”之后私信回复“888”,全部无偿共享给大家!!…...
椭圆曲线密码学(ECC)
一、ECC算法概述 椭圆曲线密码学(Elliptic Curve Cryptography)是基于椭圆曲线数学理论的公钥密码系统,由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA,ECC在相同安全强度下密钥更短(256位ECC ≈ 3072位RSA…...
【第二十一章 SDIO接口(SDIO)】
第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...
蓝桥杯 2024 15届国赛 A组 儿童节快乐
P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡,轻快的音乐在耳边持续回荡,小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下,六一来了。 今天是六一儿童节,小蓝老师为了让大家在节…...
STM32标准库-DMA直接存储器存取
文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA(Direct Memory Access)直接存储器存取 DMA可以提供外设…...
CocosCreator 之 JavaScript/TypeScript和Java的相互交互
引擎版本: 3.8.1 语言: JavaScript/TypeScript、C、Java 环境:Window 参考:Java原生反射机制 您好,我是鹤九日! 回顾 在上篇文章中:CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...
WordPress插件:AI多语言写作与智能配图、免费AI模型、SEO文章生成
厌倦手动写WordPress文章?AI自动生成,效率提升10倍! 支持多语言、自动配图、定时发布,让内容创作更轻松! AI内容生成 → 不想每天写文章?AI一键生成高质量内容!多语言支持 → 跨境电商必备&am…...
今日学习:Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存
文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...
Python ROS2【机器人中间件框架】 简介
销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...
Kafka入门-生产者
生产者 生产者发送流程: 延迟时间为0ms时,也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于:异步发送不需要等待结果,同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...
FFmpeg:Windows系统小白安装及其使用
一、安装 1.访问官网 Download FFmpeg 2.点击版本目录 3.选择版本点击安装 注意这里选择的是【release buids】,注意左上角标题 例如我安装在目录 F:\FFmpeg 4.解压 5.添加环境变量 把你解压后的bin目录(即exe所在文件夹)加入系统变量…...
