开发组件期间遇到的问题

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

创作场景

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