Angular4学习笔记之HTML属性绑定

wawor4827 发布于2019-08-21 18:36 / 1543人阅读

摘要：第二种情况控制样式如果的值为那么样式就是，否则就是写在最后对于的属性绑定和的属性绑定是一样一样的。对于文章中所用的代码是结合了学习笔记之数据绑定上面的例子做的，链接地址

简介

基本HTML属性

Css 类绑定


CSS 类绑定，[class] 全部替换的例子
 
 
CSS 类绑定，[class.sepcial] 部分替换的例子
 

CSS 类绑定，[ngClass] 替换多个的例子

Style 属性绑定

HTML属性绑定

Something
tableColspan 是一个表达式，当界面在渲染的时候会将 tableColspan的值绑定到 attr后面的 colspan 上面去

修改 bind.component.html



  [attr.colspan] 例子：
  
    
      跨列的例子
    
    
      单元格1
      单元格1

图示：

Css 类绑定 第一种情况

[calss]
someExpression 的值会完全替换掉 class的值。

修改 bind.component.css

.a{background-color: #A7A9AE;}

.b{color: #488aff;}

.c{font-size: 1rem;}

修改bind.component.html



  CSS 类绑定例子1：[class]
  CSS 类绑定，[class] 全部替换的例子

修改 bind.component.ts

divClass: string;

constructor() {
   //在3秒钟之后将样式设置为 " a b c "
  setInterval(()=>{
    this.divClass = "a b c";
  }, 3000)
}

图示：

第二种情况

[calss.special]
isSpecial 是一个 boolean，当 isSpecial 为 true 的时候会出现 special 的值，为 false的时候不会出现。

修改bind.component.html


CSS 类绑定，[class.sepcial] 部分替换的例子

修改 bind.component.ts

divClass: string;
isSpcial: boolean = false;

constructor() {

  setInterval(()=>{
    this.divClass = "a b c";
    
    //在 3秒钟之后显示样式
    this.isSpcial = true;
  }, 3000)
}

图示：

第三种情况

[ngClass]="{aaa:isA, bbb: isB}"
aaa 是指标签上面class 的属性值，isA 就boolean， 只有当 isA 为 true 的时候才会显示 aaa 属性。 同理，bbb 也是一样。

修改bind.component.html


CSS 类绑定，[ngClass] 替换多个的例子

修改 bind.component.ts

divClass: string;
isSpcial: boolean = false;

isA: boolean = false;
isB: boolean = false;


constructor() {

  setInterval(()=>{
    this.divClass = "a b c";
    this.isSpcial = true;

    this.isA = true
    this.isB = true
  }, 3000)
}

图示：

Style 属性绑定

第一种情况

[style.color] = "isSpecial ? "red" : "green" "
控制 style样式的 color, 如果 isSpecial 的值为true，那么color的属性为 red。

第二种情况

[ngStyle]= "{"font-style" : this.canSave ? "italic" : "normal" }"
控制样式 font-style 如果 this.canSave 的值为 trur 那么样式就是 italic， 否则就是 normal

写在最后

1.对于Style的属性绑定和 class 的属性绑定是一样一样的。
2.对于文章中所用的代码是结合了 Angular2学习笔记之数据绑定上面的例子做的，
  链接地址：https://segmentfault.com/a/1190000012674948

云服务器 GPU云服务器 avalon绑定属性学习笔记学习笔记一基础学习笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90637.html

Angular4学习笔记之DOM属性绑定

摘要：如果没有，请查看学习笔记之安装和使用教程事件绑定准备工作了解目的在模版的界面上面增加一个按钮，然后通过小括号绑定一个事件。简介使用插值表达式将一个表达式的值显示在模版上 {{productTitle}} 使用方括号将HTML标签的一个属性值绑定到一个表达式上使用小括号将组件控制器的一个方法绑定到模版上面的一个事件的处理器上按钮绑定事件注意在开始下面的例子之前，请先确认已...

Genng 2019-08-21 18:34 评论0 收藏0
Angular4学习笔记——数据绑定

摘要：所以，在的世界中，唯一的作用是用来初始化元素和指令的状态。当进行数据绑定时，只是在与元素和指令的和事件打交道，而就基本上靠边站了，只有比较特殊的情况才会用到他。事件绑定事件名事件绑定分为对原生事件绑定和自定义事件绑定。数据绑定总体而言有三种类型： {{...}} 插值表达式绑定属性绑定（包括property和attitude 事件绑定插值表达式绑定既可以写在html结构中，...

MRZYD 2019-08-21 17:48 评论0 收藏0
Angular4学习笔记——组件之间的交互

摘要：具体思路子组件暴露一个属性，当事件发生时，子组件利用该属性向上弹射事件。父组件绑定到这个事件属性，并在事件发生时作出回应。这个组件子树之外的组件将无法访问该服务或者与它们通讯。父子组件通过各自的构造函数注入该服务。通过输入型绑定把数据从父组件传到子组件 Angular对于父组件 => 子组件的数据通信做法和Vue很相似。 // 父组件html模板 // 子组件接收数据 i...

Guakin_Huang 2019-08-21 17:48 评论0 收藏0
Angular4学习笔记——生命周期钩子

摘要：所以如果需要使用生命周期，只要在我们的代码中写上钩子函数即可，会找到并调用像这样的钩子方法，有没有接口无所谓。当使用构造函数新建一个组件或指令后，就会按下面的顺序在特定时刻调用这些生命周期钩子方法用处当设置数据绑定输入属性发生变化时响应。接口和钩子在介绍生命周期的相关概念之前，可以先复习一下TypeScript对于接口的概念。在这里主要使用的是类接口及其实现： interf...

fizz 2019-08-21 17:48 评论0 收藏0
前端框架这么多，该如何抉择？

摘要：在引起状态变化的时刻，框架自动触发脏检查，也可以手动执行脏检查，直接操作更新视图。最后，说了这么多，大家在具体选型时还是要首先分析自己的需求和现状，然后再做选择。作为一个软件开发者，最大的挑战就是在不断涌现的新技术中进行取舍，持续学习是从事这一行业的必备技能。在这个领域里，技术更新最快地又非前端莫属了。各种框架的出现、版本的更新此起彼伏，呈现出一派欣欣向荣之景。在项目中必不可少的便...

Jackwoo 2019-08-29 15:37 评论0 收藏0