[Angular 2] Select From Multiple Nested Angular 2 Elements
You have complete control over the elements you nest inside of your component instance by using selectors to access and rearrange them. Selecting allows you reconstruct the elements in whatever order you like so you can visual customize the content passed in.
You can pass multi elmenents into ng-content:
home.ts:
@Component({
selector: 'home',
template: `
<widget-two> <h2>Title</h2>
<div>Some content</div>
<h3>Footer</h3> </widget-two>
`
})
widget-two.ts:
@Component({
selector: 'widget-two',
styles:[`
:host{
display: block;
border: 3px solid red;
}
`],
template: `
<h2>Above</h2>
<ng-content ></ng-content>
<h2>Below</h2>
`
})
So all three element will be passed into ng-content:
<h2>Title</h2>
<div>Some content</div>
<h3>Footer</h3>
ng-content can add "select" attr, you can use "element tag", "attr", "class / id":
@Component({
selector: 'home',
template: `
<widget-two> <h2 header>Title</h2> <!-- attr -->
<div class="content">Some content</div> <!-- class -->
<h3>Footer</h3> <!-- tag --> </widget-two>
`
})
@Component({
selector: 'widget-two',
styles:[`
:host{
display: block;
border: 3px solid red;
}
`],
template: `
<h2 >Above</h2>
<ng-content select="h3"></ng-content> <!-- tag h3 --> footer-->
<ng-content select="[header]"></ng-content> <!--attr h2 --> Title -->
<ng-content select=".content"></ng-content> <!-- class--->
<h2>Below</h2>
`
})
[Angular 2] Select From Multiple Nested Angular 2 Elements的更多相关文章
- angular实现select的ng-options4
ng实现简单的select <div ng-controller="ngSelect"> <select ng-model="vm.selectVal& ...
- [Angular 2 Router] Configure Your First Angular 2 Route
Using the Angular 2 router requires defining routes, passing them in to the RouterModule.forRoot and ...
- 【Angular专题】——(1)Angular,孤傲的变革者
目录 一. 漫谈Angular 二. 如果你还在使用Angularjs 三. 我计划这样学习Angular技术栈 一. 漫谈Angular Angular,来自Google的前端SPA框架,与Reac ...
- [Angular] Use Angular components in AngularJS applications with Angular Elements
When migrating AngularJS (v1.x) applications to Angular you have different options. Using Angular El ...
- NEST - How can i do multiple nested aggregation?
question: How can I do multiple nested aggregation? I have tried something like this: Aggregations(x ...
- select标签multiple属性的用法
前些日子公司让做一个功能模块.对于里面一个小功能费了些周折,现将其总结一下: 一.实现效果: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZ2FvaHVh ...
- Angular 从入坑到挖坑 - Angular 使用入门
一.Overview angular 入坑记录的笔记第一篇,完成开发环境的搭建,以及如何通过 angular cli 来创建第一个 angular 应用.入坑一个多星期,通过学习官方文档以及手摸手的按 ...
- [从 0 开始的 Angular 生活]No.38 实现一个 Angular Router 切换组件页面(一)
前言 今天是进入公司的第三天,为了能尽快投入项目与成为团队可用的战力,我正在努力啃官方文档学习 Angular 的知识,所以这一篇文章主要是记录我如何阅读官方文档后,实现这个非常基本的.带导航的网页应 ...
- Angular项目构建指南 - 不再为angular构建而犹豫不决(转)
如果你不知道什么是Angular或者根本没听说过,那么我接下来所说的对你来说毫无益处,不过如果你打算以后会接触Angular或者干脆要涨涨姿势~读下去还是有点用的. Angular和它之前所出现的其余 ...
随机推荐
- 比赛组队问题 --- 递归解法 --- java代码 --- 八皇后问题
两队比赛,甲队为A.B.C3人,乙队为X.Y.Z3人.已知A不和X比,C不和X.Z比,请编程序找出3队赛手名单 采用了与八皇后问题相似的解法,代码如下: 如有疑问请链接八皇后问题的解法:http:// ...
- 【LeetCode】118 & 119 - Pascal's Triangle & Pascal's Triangle II
118 - Pascal's Triangle Given numRows, generate the first numRows of Pascal's triangle. For example, ...
- configsections規範配置信息
對於小型項目,配置信息可以通过appSettings进行配置,而如果配置信息太多,appSettings显得有些乱,而且在开发人员调用时,也不够友好,节点名称很容易写错,这时,我们有几种解决方案 1 ...
- ps闪闪发光的字 教程+自我练习
本教程的文字效果非常经典.不仅是效果出色,创作思路及制作手法都堪称完美.作者并没有直接使用纹理素材,纹理部分都是用滤镜来完成.这需要很强的综合能力,非常值得学习和借鉴.最终效果 我的: 1.创建一个新 ...
- CameraComponent Quality
CameraComponent1.Quality := TVideoCaptureQuality.HighQuality; procedure TCameraComponentForm.Set720p ...
- CentOS下MySQL 5.7.9编译安装
MySQL 5.7 GA版本的发布,也就是说从现在开始5.7已经可以在生产环境中使用,有任何问题官方都将立刻修复. MySQL 5.7主要特性: 更好的性能:对于多核CPU.固态硬盘.锁有着更好的优化 ...
- 3.VS2010C++相关文件说明
stdafx.h说明:stdafx的英文全称为:Standard Application Framework Extensions(标准应用程序框架的扩展).所谓头文件预编译,就是把一个工程(Proj ...
- python 加密解密
1. 使用base64 s1 = base64.encodestring('hello world') s2 = base64.decodestring(s1) print s1, s2 结果 1 2 ...
- webbench压力测试
webbench最多可以模拟3w多个并发请求去测试网站负载能力. 一:获取webbench工具,安装编译: wget http://blog.zyan.cc/soft/linux/webbench/w ...
- ASP.NET MVC- 在Area里使用RedirectToAction跳转出错的解决方法
mvc使用Area分区开发后,存在不同Area之间的跳转,需要为每个区间添加Area规则,如下: 按 Ctrl+C 复制代码 using System.Web.Mvc; namespace web.A ...