写点什么

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

评论

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

5秒到1秒,记一次效果“非常”显著的性能优化

Java 编程 架构 性能优化 计算机

“古老”茶产业碰上“年轻”区块链,能否擦出新火花?

旺链科技

区块链 产业 茶叶

面试侃集合 | ArrayBlockingQueue篇

码农参上

队列 8月日更

接口管理工具APIPOST的预/后执行脚本里,常见的响应参数变量和常用方法集合——apipost

Proud lion

大前端 后端 Postman 开发工具 接口文档

☕【Java技术指南】「开发实战专题」Lombok插件开发实践必知必会操作!

码界西柚

Java 编译 lombok 8月日更

Go 语言, 一文彻底搞懂 map 实现原理

微客鸟窝

Go 语言 8月日更

百度世界2021:百度大脑升级、昆仑芯2量产、智能云加速AI落地爆发

百度大脑

人工智能 百度大脑

带你读AI论文丨用于目标检测的高斯检测框与ProbIoU

华为云开发者联盟

算法 数据集 目标检测 高斯检测框 ProbIoU

《MySQL系列》 InnoDB行记录存储结构

Silently9527

MySQL 面试 innodb innodb行记录

React Native 页面浏览事件采集方案 | 数据采集

神策技术社区

大前端 后端 代码 数据采集

四十四本iOS开发书籍资料,务必赶紧保存!

iOSer

微信公众号 ios开发 iOS书籍 iOS公众号

Swift 与 Objective-C:您应该为下一个 iOS 移动应用选择哪个语言?

iOSer

ios objective-c swift ios开发

Python代码阅读(第13篇):检测列表中的元素是否都一样

Felix

Python 编程 Code Programing 阅读代码

抖音快手短视频营销软件系统开发案例

短视频go研发框架实践

百度Geek说

百度 架构 后端 短视频 hulk

【架构实战营】模块五作业

Abner S.

#架构实战营

数字人民币银银合作以及平台接入的模式分析

CECBC

菜谱系统小成阶段,Python Web 领域终于攻占一个小山头

梦想橡皮擦

8月日更

MySQL 系列教程之(八)DQL:子查询与表连接

若尘

MySQL 数据库 8月日更

为什么代码会有好坏?

鉴释

程序员 代码 代码规范

华为海外女科学家为您揭秘:GaussDB(for MySQL)云栈垂直集成的力量有多大?

华为云开发者联盟

数据库 云数据库 GaussDB(for MySQL) 云栈 事务数据库服务

Go语言那些事儿之浅谈协程并发竞争资源问题

Regan Yue

Go 语言 8月日更

科技平台与社会的和谐相处

CECBC

基于java springboot vue uniapp商城源码(毕设)

清风

Java uniapp 商城项目 毕业设计

如何动手做出一个 CPU

Java 编程 架构 cpu 电脑

【从零开始学爬虫】采集当当网图书商品信息

前嗅大数据

大数据 爬虫 数据采集

【墨天轮专访第一期】人大金仓:国产数据库的竞争本质就是人才的竞争

墨天轮

数据库 国产数据库 KingBase 人大金仓

地表最强:iOS安全黑宝书中文版来袭

博文视点Broadview

赋能智慧社区,多维度提升管理质效

CECBC

一文了解全球主要经济体对区块链技术的采纳情况和监管政策

CECBC

如何做上线前的实操演练?

boshi

项目管理

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