这里有本 Angular 修炼秘籍送你(二)

阅读数:1 2020 年 1 月 7 日 15:36

这里有本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

评论

发布