开发应用时,UCD给到我们的样式经常使用子类选择器“>”,如果所有组件都用自定义的标签选择器,开发人员无疑要对很多样式做调整。

  Angular2组件化除了自定义标签,还可以在selector元数据里配置样式、属性的调用方式。selector总共有6种配置方式:

  • selector: 'element-name'//自定义标签选择器
  • selector: '.class'//样式选择器
  • selector: '[attribute]'//属性选择器
  • selector: '[attribute=value]'//属性值选择器
  • selector: ':not(sub_selector)'//取反选择器
  • selector: 'selector1, selector2'//多种选择器

  这里有个示例进一步说明:

@Component({
selector: 'test-component, .test-component, [test-component], [component="test"]'
template: `Hell Test Component!`
})
export class TestComponent {}

  用以下任何一种方式调用TestComponent组件,都能成功渲染。

  • <test-component></test-component>
  • <p test-component></p>
  • <p class="test-component"></p>
  • <p component="test"></p>

  使用自定义标签能让文档结构更清晰,推荐使用这种方式调用组件;而对于样式复杂的组件可以尝试使用非自定义标签的选择器。

  

Angular2-除了自定义标签,你还可以这样配置组件的选择器的更多相关文章

  1. django 组件 自定义过滤器 自定义标签 静态文件配置

    组件 将一些功能标签写在一个html文件里,这个文件作为一个组件,如果那个文件需要就直接拿过来使用即可: 这是title.html文件,写了一个导航栏,作为一个公用的组件 <div style= ...

  2. day58——模板继承、组件、自定义标签和过滤器、inclusion_tag、静态文件配置、url别名和反向解析、url命名空间

    day58 模板相关 模板继承(母版继承) 1. 创建一个xx.html页面(作为母版,其他页面来继承它使用) 2. 在母版中定义block块(可以定义多个,整个页面任意位置) {% block co ...

  3. Django 模板 语法 变量 过滤器 模板继承 组件 自定义标签和过滤器 静态文件相关

    本节目录 一 语法 二 变量 三 过滤器 四 标签Tags 五 模板继承 六 组件 七 自定义标签和过滤器 八 静态文件相关 一 语法   模板渲染的官方文档 关于模板渲染你只需要记两种特殊符号(语法 ...

  4. django之模板系统 --》内容(filter过滤器、tags标签【for、if、with】、母板以及继承、crf_token、注释、组件、静态文件【load static】、get_static_prefix、自定义标签和tag)

    常用: Django模板中只需要记两种特殊符号: {{ }}和 {% %} {{ }}表示变量,在模板渲染的时候替换成值,{% %}表示逻辑相关的操作. 变量 {{ 变量名 }} 变量名由字母数字和下 ...

  5. Spring 自定义标签配置

    前景:经常使用一些依赖于Spring的组件时,发现可以通过自定义配置Spring的标签来实现插件的注入,例如数据库源的配置,Mybatis的配置等.那么这些Spring标签是如何自定义配置的?学习Sp ...

  6. Django:母版、继承、组件、自定义标签

    1.for循环应用 1.1for Variable Description forloop.counter 当前循环的索引值(从1开始) forloop.counter0 当前循环的索引值(从0开始) ...

  7. Django-模板继承/组件/自定义标签

    一.标签tags for标签 遍历每一个元素:  写个for,然后 tab键自动生成for循环的结构,循环很基础,就这么简单的用,没有什么break之类的,复杂一些的功能,你要通过js def get ...

  8. JavaEE自定义标签:标签类的创建、tld配置文件的创建(位置、如何创建)、Web-XML配置、JSP应用

    1.标签 以类似于html标签的方式实现的java代码的封装. 第一:形成了开发标签的技术标准---自定义标签的技术标准. 第二:java标准标签库(sun之前自己开发的一系列的标签的集合)jstl, ...

  9. Android 之 自定义标签 和 自定义组件

    1    自定义标签 这是我的模板项目目录     既然想像 android:text  那样使用自己的标签,那么首先得有标签. 在 res/values/ 下我新建了个 mm_tag.xml (切记 ...

随机推荐

  1. leetcode 最长公共前缀

    编写一个函数来查找字符串数组中的最长公共前缀. 如果不存在公共前缀,返回空字符串"". 示例 1: 输入: ["flower","flow" ...

  2. Gogland配置- 修改Go源代码tab值

    Gogland对Go源代码默认值为8个,我很不习惯,第一次遇到tab数量这么大的,于是我决定修改这个tab值! 1,点击顶部菜单“File”->"Settings". 2,在 ...

  3. WEB H5 JS QRCode二维码快速自动生成

    万能的GITHUB: https://github.com/davidshimjs/qrcodejs HTML: <div class="col-xs-10 col-xs-offset ...

  4. jzoj5813

    tj:可以知道,隨意構造一個數列x,且x的第i位被n整除的方案是(約數個數)^2m,因為所有數可以隨便選,只要這個數能被n整除即可,方案為約數個數 設一個合法數列a的f值為x,則x小於n^m 假設所有 ...

  5. npm 查看express版本

    npm list 名称    eg: npm list express

  6. spring管理hibernate session的问题探究

    我们再用spring管理hibernate的时候, 我们会继承HibernateDaoSupport 或者HibernateTemplate类. 我们不知道这两个类之间有什么关系. 也没有去关闭ses ...

  7. $.ajax()——超时设置,增加 loading 提升体验

    前端发送Ajax请求到服务器,服务器返回数据这一过程,因原因不同耗时长短也有差别,且这段时间内页面显示空白.如何优化这段时间内的交互体验,以及长时间内服务器仍未返回数据这一问题,是我们开发中不容忽视的 ...

  8. day 09 课后作业

    # -*- coding: utf-8 -*-# @Time : 2018/12/28 14:25# @Author : Endless-cloud# @Site : # @File : 08 课后作 ...

  9. 基于Django+celery二次开发动态配置定时任务 ( 二)

    一.需求 结合上一篇,使用djcelery模块开发定时任务时,定时任务的参数都保存在djcelery_periodictask表的args.kwargs字段里,并且是json格式.那么,当定时任务多了 ...

  10. 《条目二十九:对于逐个字符的输入请考虑istreambuf_iterator》

    <条目二十九:对于逐个字符的输入请考虑istreambuf_iterator> 1.使用: ifstream inputfile("xxxx"); string fil ...