zoukankan      html  css  js  c++  java
  • 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>

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

      

  • 相关阅读:
    js获取input文本框内容问题
    Windows下更改pip镜像源
    php用mysql方式连接数据库出现Deprecated报错
    FTP服务与配置
    mySQL安装与基础配置
    httpd安装与配置(编译安装)
    Samba简介与配置(匿名&本地用户验证)
    NFS服务简介与配置
    OpenSSH配置与基本使用
    spark 提交任务学习
  • 原文地址:https://www.cnblogs.com/longhx/p/6959790.html
Copyright © 2011-2022 走看看