Angular26 ng-content和ng-container、投影的使用
1 准备工作
1.1 搭建angular环境
技巧01:本博文基于angular5
1.3 创建一个angular项目
技巧01:根据业务划分模块,每个模块都设定一个主组件
技巧02:利用路由实现模块的懒加载
2 投影的应用场景
2.1 需求
父组件如何动态的向子组件进行传值操作
2.2 解决
》利用输入属性实现:子组件定义一个输入属性,父组件在使用子组件时就可以通过子组件的输入属性来向子组件传值
》利用路由传参实现:子组件作为父组件的一个子路由对应的组件,父组件通过路由参数向子组件传递数据
》利用服务实现:把服务看做是两个组件之间的桥梁,从而实现传参操作
》投影实现:父组件在使用子组件的时候将需要传给子组件的数据作为子组件元素的内容卸载子组件标签里面即可
2.3 投影的优点
》进行动态传值,可以将一个复杂的组件作为内容投影到子组件中
》解决自定义组件嵌套问题【没有投影功能的自定义组件不能进行嵌套操作】
2.4 投影的应用场景
》自定义组件标签的嵌套使用
》利用自定义组件标签包装原生的HTML标签
3 编程步骤
3.0 ng-content 和 ng-container 的妙用
3.0.1 ng-content
ng-content 通常在投影中使用:当父组件需要向子组件投影数据时必须指定将数据投影到子组件的哪个位置,这时候就可以利用ng-content标签来做一个占位符。
3.0.1 ng-container
ng-container 通常在结构性指令中使用:当需要在一个组件运用两条结构性指令时是会报错的,这时就可以利用ng-container标签对原组件做一层封装,再在ng-container标签上使用第一条结构性指令,在原组件标签上使用第二条结构性指令,;例如:
在一个标签中使用两条结构性指令时的错误信息如下:
解决办法
3.1 投影一块内容
3.1.1 需求
在使用bootstrap3提供的panel组件时很麻烦,每次都需要写4个div而且还要给各个div设定不同的样式;如何利用一个自定义组件对其进行一次封装
3.1.2 bootstrap3的panel组件原装使用
3.1.2 解决办法
》创建自定义组件app-panel,组件的视图中利用 ng-content 进行站位处理
技巧01:ng-content元素的select属性的作用是避免投影错误用的
<div class="panel panel-primary"><div class="panel-heading"><span>自定义panel组件</span></div><div class="panel-body"><ng-content select=".body"></ng-content></div><div class="panel-footer">{{currentDate | date : "yyyy-MM-dd HH:mm:ss"}}</div> </div>
View Code
》使用自定义的app-panel组件
技巧01:定义app-panel组件视图中ng-content的select属性值必须和使用app-panel组件时app-panel元素的内容的class属性保持一致,但是select的值如果前面有一个点的话表示是通过类进行对应,如果没有点的话表示通过标签进行对应【PS: 此处是通过类进行对应】,如果使用标签进行对应,在使用app-panel组件时对应的app-panel元素的内容就可以不用写class属性了。
3.2 投影多块内容
3.2.1 需求
在使用bootstrap3提供的panel组件时很麻烦,每次都需要写4个div而且还要给各个div设定不同的样式;如何利用一个自定义组件对其进行一次封装
3.2.2 解决
》创建自定义组件app-panel
<div class="panel panel-primary"><div class="panel-heading"><ng-content class="h4"></ng-content></div><div class="panel-body"><ng-content select=".body"></ng-content></div><div class="panel-footer">{{currentDate | date : "yyyy-MM-dd HH:mm:ss"}}</div> </div>
View Code
》使用自定义的app-panel组件
3.3 投影自定义组件
技巧01:和利用标签名进行对应是一样的,只不过这时候在设置ng-content的select属性时是自定义组件的标签名而已
》自定义app-panel组件
》自定义app-test03标签
》使用自定义ng-panel标签
转载于:https://www.cnblogs.com/NeverCtrl-C/p/9250614.html
Angular26 ng-content和ng-container、投影的使用相关推荐
- ng serve 和 ng build 的区别
在这个文档里有介绍. 在开发过程中,你通常会使用 ng serve 命令来借助 webpack-dev-server 在本地内存中构建.监控和提供服务.但是,当你打算部署它时,就必须使用 ng bui ...
- Docker部署NG并设置 NG为静态文件管理器
Docker部署NG并设置 NG为静态文件管理器 1.docker拉取nginx镜像 docker pull nginx 或者docker pull nginx:指定版本号 2.检查拉去下来的镜像 d ...
- angular项目 集成ng zorro 和ng alain
angular项目 集成 ng zorro和ng alain(mock 和acl权限)学习笔记 这段时间,比较忙,很久没有写博客了.作为后端开发人员,第一次接触angular,以下是个人的学习心得和D ...
- 输入 ng build 或者 ng serve 之后没有任何输出的问题分析
Angular 应用,输入 ng build 命令,没有任何反应: ng version 命令的输出:显示的 CLI 版本号为 12.2.5 然而 package.json 里定义的版本为 ~9.1. ...
- php ng 性能,PHP NG (PHP 5.7) 性能比PHP5.6 提升近1倍
PHP NG (你要愿意的话叫 PHP 5.7 也行)目前还在 alpha 开发阶段,但已经显示出惊人的性能提升.关键是仍保持对 PHP 5.6 的兼容性. Dmitry Stogov 在今年1月中旬 ...
- php ng 性能,PHP NG (PHP 5.7) 性能比PHP5.6 提升近1倍_PHP
PHP NG (你要愿意的话叫 PHP 5.7 也行)目前还在 alpha 开发阶段,但已经显示出惊人的性能提升.关键是仍保持对 PHP 5.6 的兼容性. Dmitry Stogov 在今年1月中旬 ...
- php ng 性能,PHP NG (PHP 5.7) 性能比PHP5.6 提升近1倍_PHP教程
PHP NG (PHP 5.7) 性能比PHP5.6 提升近1倍 PHP NG 你要愿意的话叫 PHP 5.7 也行)目前还在 alpha 开发阶段,但已经显示出惊人的性能提升.关键是仍保持对 PHP ...
- NG Ng-content(内容映射)
ng-content ng-content是内容映射指令(也叫内容嵌入),内容映射指的是在组件中嵌入模板代码,方便定制可复用的组件,很好地扩充组件的功能,方便代码的复用. ng-content中的组件 ...
- ng命令汇总:Angular CLI 使用教程指南参考
Angular CLI 使用教程指南参考 Angular CLI 现在虽然可以正常使用但仍然处于测试阶段. Angular CLI 依赖 Node 4 和 NPM 3 或更高版本. 安装 要安装Ang ...
- angular蚂蚁_Angular 中后台前端解决方案 - Ng Alain 介绍
背景 之前项目使用过vue.js+iview,习惯了后端开发的我,总觉得使用不习惯,之前分析易企秀前端代码,接触到了angular js,完备的相关功能,类似后端开发的体验,让人耳目一新,全新的ang ...
最新文章
- Nginx虚拟主机配置
- 第六章 SpringCloud之Ribbon负载均衡
- vue和react的区别是什么?
- IDEA导入Eclipse项目的方法步骤(图文教程)
- CentOS查看CPU,内存,位数行等信息命令
- 文件操作:fseek函数和ftell函数
- “决策树”——数据挖掘、数据分析
- 社区团购小程序有哪些赚钱方式
- 安卓学习专栏——百度地图(6)移动到我的位置(图文+代码)
- 存储过程报错:Error converting data type varchar to bigint.
- MATLAB实现智能计算方法实验:实验三 BP神经网络
- DDK开发介绍_自我学习
- Vuex状态刷新状态丢失的处理方法
- 青少年网络成瘾家长怎么办
- Marvell深耕智能家居行业 赞同语音控制将成必然发展趋势
- Tomcat7 配置 WebSocket
- HTML Help WorkShop制作chm图解
- Springboot美容院管理系统 java idea mysql
- WebGIS的基本概念
- TF-IDF算法概述及模型构建