Angular2 - 事件和属性 - 02

我们在前面对时间和属性做了一些介绍。我们来看看其他的Angular绑定，在这里我们要提一些当Angular在进行绑定的时候。Angular会对绑定的内容做一次消毒处理。无论你是属性绑定还是插值表达式。

当我们想要帮下面的值绑定到DOM或者HTML中是。Angular会检查是否有恶意内容出现。

evilTitle = 'Template <script>alert("evil never sleeps")</script>Syntax';

<!--
  Angular generates warnings for these two lines as it sanitizes them
  WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).
 -->
<p><span>"{{evilTitle}}" is the <i>interpolated</i> evil title.</span></p>
<p>"<span [innerHTML]="evilTitle"></span>" is the <i>property bound</i> evil title.</p>

我们可以看到页面上出现了警告。并且标签也被完全显示。并不会有提示出现。

• [attr.colspan]，attribute 绑定，当我们没有属性可以绑定的时候。我们就必须使用attribute来绑定数据，比如table，svg中的colspan或者rowspan等attribute。他们是attribute，没有对应的属性可以绑定。

我们尝试绑定colspan带上计算表达式。会得到错误：

<tr><td colspan="{{1 + 1}}">Three-Four</td></tr>

//当我们像上面一样给colspan绑定表达式时，会得到如下错误结果。
//因为table没有colspan属性。但是Angular的插值表达式和属性绑定只能设置属性。不能设置attribute
Template parse errors:
Can't bind to 'colspan' since it isn't a known native property

所以Angular基于这一痛点给出了绑定规则。[attr.colspan]，我们改变一下上面的语句来看看结果.

<table border="1">
   <tr>
      <td>test1</td>
      <td>test2</td>
   </tr>
      <tr>
      <td [attr.colspan]="1 + 1">test colspan</td>
   </tr>
</table>

这样td就colspan了两列了。。

attribute 绑定的主要用例之一是设置 ARIA attribute（译注：ARIA 指可访问性，用于给残障人士访问互联网提供便利）， 就像这个例子中一样：

<!-- create and set an aria attribute for assistive technology -->
<button [attr.aria-label]="actionName">{{actionName}} with Aria</button>

• css类绑定。前面一节我们提到了css的绑定语法。这里就不过多介绍了。
  • [class.special] = "expression"
  • [style.color] = "red"
  • [style.font-size.px] = "15px"

当我们想要根据变量来改变属性值的时候我们可以向下面一样操作。

//Component 定义变量delta , 修改delta的值。div的font-size也会想要更改。

<input [(ngModel)]="delta" type="text"/>
<div [style.font-size.px]="delta">Resize Font</div>

 

但值得注意的是。即使你delta定义的是number内心。当在input里面修改delta的值之后会变成string类型。这就会有一个新的问题。当你想要和其他的number类型做加法运算的时候需要做类型转换。

• x 和 xChange 事件。这就为我们在父子Component结构中传值和坚持x的改变提供了方便。当我们在一个ParentComponent中使用另一个ChildComponent，的时候，我们需要吧ParentComponent的值传入到ChildComponent中。做一系列的运算。在返回结果。

//在parent component我们调用了app-child component，并把fontSizePx以size作为变量传入app-child中。
<app-child [(size)] ="fontSizePx"></app-child>
<div [style.font-size.px]="fontSizePx">Resizable Text</div>

import { Component, OnInit , Input , Output , EventEmitter} from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.sass']
})
export class ChildComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  @Input() size: number; //接收size作为变量
  @Output() sizeChange = new EventEmitter<number>(); //暴露sizeChange 时间接口

  resize() {
    this.size++;
    this.sizeChange.emit(this.size); //通知parent component size的改变
  }
}

当我们调用resize 方法之后，我们发现parent-component的font-size在主键增大。