[ionic3.x开发记录]ng-content使用
在ionic开发公用组件的时候,我一直在想有没有angular有没有像vue一样的slot插槽。方便组件后期扩展。
然后去翻文档,发现有ng-content这么个东西,用法很像vue的slot。
组件预留插槽位置
<div class="header-wrapper">
<div class="header">
<span class="back" *ngIf="showBackButton"></span>
<span class="title">{{title}}</span>
</div>
<ng-content></ng-content>
</div>
使用的时候直接在标签内添加你要的html代码或者子组件
<custom-header [showBackButton]="false" title="Login">
<logo-title text="Login with Palm ID"></logo-title>
</custom-header>
logo-title子组件就会插入到ng-content的位置里面
这样就可以很简单的实现在一些公用组件扩展自己的html内容了。
[ionic3.x开发记录]ng-content使用的更多相关文章
- [ionic3.x开发记录]参考ionic的float-label动效,写一个项目内通用的input组件,易扩展
上图: module: import {NgModule} from "@angular/core"; import {CommonModule} from "@angu ...
- [ionic3.x开发记录]ios下页面过渡效果不出现的小坑
如果内容没有被<ion-content></ion-content>或者<ion-header></ion-header>标签包裹,页面过渡的时候是没有 ...
- ionic3+angular4开发混合app 之自定义组件
这里主要是记录ionic3+angular4开发混合app时自定义组件,我想自定义组件的方法和angular4应该类似,具体在纯angular4中自定义组件,暂时没有实践,个人觉得差别不大,之后实践了 ...
- .Net Core ORM选择之路,哪个才适合你 通用查询类封装之Mongodb篇 Snowflake(雪花算法)的JavaScript实现 【开发记录】如何在B/S项目中使用中国天气的实时天气功能 【开发记录】微信小游戏开发入门——俄罗斯方块
.Net Core ORM选择之路,哪个才适合你 因为老板的一句话公司项目需要迁移到.Net Core ,但是以前同事用的ORM不支持.Net Core 开发过程也遇到了各种坑,插入条数多了也特别 ...
- Dokuwiki 二次开发记录
Dokuwiki 二次开发记录 [转]http://www.syyong.com/other/Dokuwiki-Secondary-Development-Record.html DokuWiki 是 ...
- Android开发 TextView的开发记录
前言 此篇博客是记录一些TextView开发上一些少用的开发功能项.目前开发记录如下: 添加图片 文字滚动 添加省略号 实现长文的收起和展开功能 改变一个字符串里自定字符的颜色或者大小 效果字体(粗体 ...
- CozyRSS开发记录22-界面退化
CozyRSS开发记录22-界面退化 1.问题1-HtmlTextBlock 找的这个HtmlTextBlock有很严重的bug,有时候显示不完全,有时候直接就崩了.然后看了下代码,完全是学生仔水平写 ...
- CozyRSS开发记录21-默认RSS源列表
CozyRSS开发记录21-默认RSS源列表 1.默认列表 在第一次使用CozyRSS的情况下,我们让它内置五个RSS源吧: 2.响应RSS源的更新 先不处理RSS源列表项的点击,响应下下拉菜单里的更 ...
- CozyRSS开发记录20-CanResizeWithGrip
CozyRSS开发记录20-CanResizeWithGrip 1.窗口样式 首先,WindowStyle有四种: 然后,对于窗口缩放的ResizeMode,也有四种,CanResize和CanRes ...
随机推荐
- centos7中nfs文件系统的使用
需求: file01:1.1.1.1(内网ip 172.20.103.212),file02:2.2.2.2(内网ip 172.20.103.211) 这两台机器的 /dev/mapper/myvg- ...
- WPF中触发器Trigger、MultiTrigger、DataTrigger、MultiDataTrigger、EventTrigger几种
WPF中有种叫做触发器的东西(记住不是数据库的trigger哦).它的主要作用是根据trigger的不同条件来自动更改外观属性,或者执行动画等操作. WPFtrigger的主要类型有:Trigger. ...
- java 网站用户在线和客服聊天
注:本文来源于<java 网站用户在线和客服聊天> 这是应用到项目中的一个例子. 实现原理是将信息存储到Application域里面.然后使用Struts2 Action 用json格式的 ...
- SQL允许脏读WITH(NOLOCK)
使用WIHT(NOLOCK)有利也有弊,所以在决定使用之前,你一定需要了解清楚WITH(NOLOCK)的功能和缺陷,看其是否适合你的业务需求,不要觉得它能提升性能,稀里糊涂的就使用它. --事务未提交 ...
- windows无法安装msi文件
命令提示符(管理员身份运行): 输入:msiexec /i e:\spark\scala-2.11.12.msi 其中e:\spark\scala-2.11.12.msi:就是安装文件的位置.
- Spring Data REST PATCH请求 远程代码执行漏洞案例(CVE-2017-8046)
恶意的PATCH请求使用精心构造的JSON数据提交到spring-data-rest服务可以执行任意JAVA代码 1. 背景 Spring Data REST是Spring Data项目的一部分,可以 ...
- js中一个对象中遇到一个相同的key所对应的value值相加
如图: 变成: js原生如下: var abc=[ {typeid:1,ade:1}, {typeid:2,ade:1}, {typeid:1,ade:2}, {typeid:1,ade:2}, {t ...
- css结构选择器组合使用,选择父元素中多个子元素中某一段元素
nth-of-type()和nth-child()写法一样,这里只用nth-of-type()演示,习惯type 直接上代码 /* 从前向后选择,第6个开始 */ li:nth-of-type(n+6 ...
- for in和for of的区别(转)
原文链接:https://www.jianshu.com/p/c43f418d6bf0 1 遍历数组通常用for循环 ES5的话也可以使用forEach,ES5具有遍历数组功能的还有map.filte ...
- 毕向东—Java基础知识总结(超级经典)
Java基础知识总结(超级经典) 写代码: 1,明确需求.我要做什么? 2,分析思路.我要怎么做?1,2,3. 3,确定步骤.每一个思路部分用到哪些语句,方法,和对象. 4,代码实现.用具体的java ...