AI实践哪家强?来 AICon, 解锁技术前沿,探寻产业新机! 了解详情
写点什么

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

  • 2020-01-07
  • 本文字数:1519 字

    阅读完需:约 5 分钟

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


2020-01-07 15:36923

评论

发布
暂无评论
发现更多内容

VUE为什么在中国如此流行?

Speedoooo

Vue 跨端框架 小程序容器技术 跨端技术

CNCC 2023 | 五位重磅大咖齐聚沈阳,共同探讨「大模型与推荐系统」

小红书技术REDtech

人工智能 AI 算法 #推荐系统 #大模型

从昏暗到明亮—改善照明环境,提升编程效率

颜淡慕潇

程序员 1024程序员节 明基BenQ ScreenBarBar

思辨:移动开发的未来在哪?

巫山老妖

移动开发

手把手带你打一场时间序列比赛—数据探索

打工人!

机器学习 时间序列预测

通过 Python 脚本支持 OC 代码重构实践(一):模块调用关系分析

百度Geek说

Python 自动化 重构 脚本 企业号10月PK榜

用友iuap数据中台又获奖了! 用友

用友BIP

数据驱动

国际原油价格大波动,航司如何精准降低航油成本?

用友BIP

降本节能

秋色宜人适出行,如何提前做好防雨防晒准备?

最新动态

Zebec Protocol 薪酬支付工具 WageLink 上线,掀新一轮薪酬支付浪潮

鳄鱼视界

Zebec Protocol 薪酬支付工具 WageLink 上线,掀新一轮薪酬支付浪潮

BlockChain先知

数划云与明道云达成产品战略生态合作

数划云

极狐GitLab 致敬中国 1000万程序员

极狐GitLab

1024 极狐GitLab 致敬

Zebec Protocol 薪酬支付工具 WageLink 上线,掀新一轮薪酬支付浪潮

石头财经

Linux绝对路径和相对路径

芯动大师

我们距离“裸眼3D自由”,还有多远?

脑极体

XR

【Spring大揭秘】系统性能提升!带你解锁系统优化大法

树上有只程序猿

spring

智能边缘云安全专区简介

天翼云开发者社区

云计算 安全

云电脑:运行原理与自行搭建指南

天翼云开发者社区

云计算 云电脑

华为云全新上线Serverless应用中心,支持一键构建文生图应用

云计算 软件开发 华为云

Python 数组和列表:创建、访问、添加和删除数组元素

小万哥

Python 程序员 软件 后端 开发

Java常见的锁及同步机制

echoes

这里有本Angular修炼秘籍送你(二)_语言 & 开发_Think体验设计_InfoQ精选文章