这里有本 Angular 修炼秘籍送你（二）

开发组件期间遇到的问题

1. 使用组件的时候直接加在组件上的样式和样式类无效：

解决方案：给组件父容器上加样式或样式类，代码如下：

（左右/上下滑动可查看全部代码）

<div class="wrapper-content">   <h1>基本用法</h1>   <p-progressbar [animate]="animate" [value]="value" [maxValue]="maxValue"></p-progressbar></div>

2. angular 样式封装

组件内部定义的样式类不影响组件外部。

采用的策略是：angular 在解析组件内部写的样式会加上_ngcontent-属性。这样不会全局污染。

打开控制台，查看 DOM 接口，在 head 标签中的 style 标签中会看到如下样式：

查看宿主元素也就是自定义的组件标签 DOM，如下图所示会加上_nghost-属性。

导致的问题是组件内部定义的样式类在宿主元素上不生效。

为解决上述为题 angualr 提供了三种样式封装策略。需要引入 ViewEncapsulation。

（左右/上下滑动可查看全部代码）

import { ViewEncapsulation } from’@angular/core’

具体方案：在元数据上加 encapsulation 属性。有下面三个值：

ViewEncapsulation. Emulated(仿真)

这是默认选项，通过 Angular 来模拟类似 Shadow DOM 的行为。不会影响全局样式。

ViewEncapsulation. Native(原生)

原先浏览器 ShadowDOM 行为。

ViewEncapsulation.None(无)

angular 无任何封装行为，会全局污染。

3. 如何给一个 DOM 节点上使用 2 个 ng-class

在 angular1.x 上只能有一个，并且只有一个生效。

Angular5 中有个替代方案如下：

[class.className]=”expression”可以写多个。

左右/上下滑动可查看全部代码

<div class="p-progress-bar" [class.p-no-animation]="!hasAnimation"[ngClass]="progressClass"></div>

4. 如何实现接口的双向数据绑定（Two-WayData Binding）

双向数据绑定原理图：

双向绑定是由两个单向绑定组成：

模型 -> 视图数据绑定

视图 -> 模型事件绑定

Angular 2.x 及以上版本中 [] 实现了模型到视图的数据绑定，() 实现了视图到模型的事件绑

定。两个结合在一起 [()] 就实现了双向绑定。就好比[(ngModel)]。

1）在 angular1.x 中可以按照下面的方式实现接口的数据绑定，通过‘=’修饰符表示这个数据双向绑定

如下代码，定义接口的时候使用‘=’

scope: { format:  ‘=?’}

2）在 angular2.x 以上的版本实现方式有下面两种

第一种，Input 和 output 装饰器结合使用

实现方案：

I.定义一个 Input 输入属性，定义一个 Output 输出的事件接口，名称之间形式如下：

（左右/上下滑动可查看全部代码）

@Input() stated : boolean;

@Output() statedChange = new EventEmitter();II.在内部修改 stated 的时候把这个值，把这个值通知到外部。

private toggleSwitch(): void {  this.stated = !this.stated;  this.statedChange.emit(this.stated);}

III.使用的时候形式如下

（左右/上下滑动可查看全部代码）

<p-switch name=“state” [(stated)]=“stated”>

原理如下：

[(stated)] 可以拆分成两部分 stated 和 statedChange，[stated]用于绑定输入属性，(statedChange)用于绑定输出属性。当 Angular 在解析模板时，遇到 [(stated)] 形式的绑定语法，它会期待这个指令中会存在一个名为 stated 的输入属性和一个名为 statedChange 的输出属性。

第二种，创建类表单组件

推荐学习地址（复制链接到浏览器打开）：

https://segmentfault.com/a/1190000009070500

把这个组件当中最重要的接口定义成双向数据绑定，如下方式使用：

双向数据绑定的值用[(ngModel)]=”xxx”绑定实现。

使用形式如下(就好比原生的 textarea 标签)

（左右/上下滑动可查看全部代码）

<p-spinner name="state" [(ngModel)]="value"></p-spinner >

本转载自 Think 体验设计公众号。

原文链接：https://mp.weixin.qq.com/s/4bfahysRdH9pVST_UZ4cXg