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

  开发应用时,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>

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

  

时间: 2024-10-27 01:42:54

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

django 组件 自定义标签 静态文件配置

组件 将一些功能标签写在一个html文件里,这个文件作为一个组件,如果那个文件需要就直接拿过来使用即可: 这是title.html文件,写了一个导航栏,作为一个公用的组件 <div style="background-color: cyan;width: 100%;height: 40px;"> <span style="font-size: 20px;">首页</span> <span style="font-s

Spring 自定义标签配置

前景:经常使用一些依赖于Spring的组件时,发现可以通过自定义配置Spring的标签来实现插件的注入,例如数据库源的配置,Mybatis的配置等.那么这些Spring标签是如何自定义配置的?学习Spring标签的自定义配置为以后实现分布式服务框架做技术储备. 技术分析:Spring的标签配置是通过XML来实现的,通过XSD(xml Schema Definition)来定义元素,属性,数据类型等. Spring自定义标签解析 1.Spring启动时通过扫描根目录下的META-INF文件下的sp

JSP自定义标签配置

JSP自定义标签 <taglib> <taglib-uri>/WEB-INF/you.tld</taglib-uri> <taglib-location>/WEB-INF/you.tld</taglib-location> </taglib> 由这个配置可知,JSP自定义标签配置文件不是放在lib目录下,也不是放在classes文件夹中,更不是放在WebRoot目录下,而是放在WEB-INF目录下

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

1.标签 以类似于html标签的方式实现的java代码的封装. 第一:形成了开发标签的技术标准---自定义标签的技术标准. 第二:java标准标签库(sun之前自己开发的一系列的标签的集合)jstl,以及表达式语言EL. 2.自定义标签 (1)理解: 可以允许用户自己根据自己的需要,去开发自己的标签的技术规范. 通俗:在Jsp页面上,以简单的标签封装java代码的操作. //在自定义标签类中,先调用setPageContext()实例化内置对象: //然后是doStartTag()方法,核心代码

自定义flex组件使用标签方式添加子组件

一般情况下,当我们写了一个继承自flex组件并往里面添加了子组件,然后想用标签等方式添加子组件时候报错了,那如何解决这一的问题,自定义组件代码如下: <?xml version="1.0" encoding="utf-8"?> <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">

Spring的自定义标签

当Spring拿到一个元素时首先要做的是根据命名空间进行解析,如果是默认的命名空间,则使用parseDefaultElement方法进行元素解析,否则使用parseCustom Element方法进行解析. protected void parseBeanDefinitions(Element root, BeanDefinitionParserDelegate delegate) { if (delegate.isDefaultNamespace(root)) { NodeList nl =

Spring 源码分析(四)--自定义标签的使用

在之前的代码分析中,Spring标签的解析分为 默认标签和自定义标签两种,前一篇文章分析了Spring中对默认标签的解析过程. 本文将分析Spring中自定义标签的使用过程: 一:回顾 public class DefaultBeanDefinitionDocumentReader implements BeanDefinitionDocumentReader { /** * Parse the elements at the root level in the document: * "imp

Spring源码学习(四)自定义标签的解析

新的一年 只争朝夕 不负韶华 加油加油?? (一)自定义便签使用 步骤:(前提要将Spring Core包加入项目中) (1)创建需要扩展的组件 (2)定义一个XSD文件描述组件内容 (3)创建一个文件,实现BeanDefinitionParse接口,用来解析XSD文件中的定义和组件定义 (4)创建一个Handler文件,扩展自NamespaceHandleSupport,目的是将组件注册到Spring容器 (5)编写Spring.Handlers和Spring.schemas文件 具体代码如下

Javaweb学习笔记6—EL表达式与JSTL及自定义标签

 前几天博客被黑了,导致博客登陆不上,把前几天应该发的东西的东西重新发一遍 今天来讲javaweb的第六阶段学习. EL表达式与JSTL及自定义标签是对上篇文章介绍的JSP的扩展,不能说是很重要的东西,但是也要了解. 老规矩,首先先用一张思维导图来展现今天的博客内容. ps:我的思维是用的xMind画的,如果你对我的思维导图感兴趣并且想看到你们跟详细的备注信息,请点击下载 另外:如果图看不清的话请右击---在新窗口中打开会清楚很多. 一.EL表达式 1,EL简介 Expression Lan