[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和它之前所出现的其余 ...
随机推荐
- 链接服务器"(null)"的 OLE DB 访问接口 "Microsoft.Jet.OLEDB.4.0" 返回了消息 "未指定的错误"。[手稿]
消息 7302,级别 16,状态 1,第 1 行 无法创建链接服务器 "(null)" 的 OLE DB 访问接口 "Microsoft.JET.OLEDB.4.0&qu ...
- 1005acm罚时
ACM国际大学生程序设计竞赛是由国际计算机学会主办的,一项旨在展示大学生创新能力.团队精神和在压力下编写程序.分析和解决问题能力的年度竞赛.参赛队伍最多由三名参赛队员组成,竞赛中一般命题10-13题, ...
- select多个字段赋值给多个变量
在存储过程中定义了变量v1 int;v2 int;v3 int;从表tab1选择3个字段f1,f2,f3赋值给这三个变量,要如何写 如果单个变量可以 select f1 into v1 from t ...
- [WebService]之代码优先方法与契约优先方法
什么是 web 服务? web 服务是对应用程序功能的网络访问接口,它是使用标准 Internet 技术构建的. 我们目前看到的部署在 Internet 上的 web 服务都是 HTML 网站.其中, ...
- HW7.14
import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...
- BestCoder Round #88
传送门:BestCoder Round #88 分析: A题统计字符串中连续字串全为q的个数,预处理以下或加个cnt就好了: 代码: #include <cstdio> #include ...
- 各种边框样式。。本以为border不是这么用的。
关于文本框样式□ 文本框样式 □ 显示虚线边框的文本框(IE5.5才可看到效果) <INPUT style="border-width: 1px,1px,1px,1px;border ...
- 第三百四十七天 how can I 坚持
下班的时候眼皮就一直在跳,今天意志好消沉,以后还是少说话,多说不宜啊.. 挣脱束缚,无论怎样,对于生命,什么都是次要的,不要想太多. 最近事比较多,应该是累了,睡一觉 应该就好了. 睡觉,晚安.
- mysql编码详解
在开发程序的时候,我们使用mysql数据库开发的时候,有时会碰到自己明明输入的是中文,为什么数据库中存储的就是???? 1.在配置Connection URL时,加上?useUnicode=true& ...
- hdu 5475 An easy problem(暴力 || 线段树区间单点更新)
http://acm.hdu.edu.cn/showproblem.php?pid=5475 An easy problem Time Limit: 8000/5000 MS (Java/Others ...