限时领|《AI 百问百答》专栏课+实体书(包邮)! 了解详情
写点什么

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

评论

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

普通人用AI切水果视频8天涨粉17万,这个赚钱机会你还不知道?

田威AI

创业 赚钱 AI 图像生成 +AI

支付宝携手HarmonyOS SDK实况窗,开启便捷停车生活

HarmonyOS SDK

harmoyos

十余家头部伙伴经验分享,HarmonyOS SDK为鸿蒙应用体验创新注入源动力

HarmonyOS SDK

harmoyos

Postgresql中的检索:中文分词及语义检索

程序员架构进阶

postgresql 检索 6月日更 6 月 优质更文活动 RAG应用

1688图片搜索接口攻略

tbapi

1688图片搜索接口 1688拍立淘接口

HDC2025华为视频高品质影音赛道新突破 技术革新打造品质观影中枢

最新动态

大数据-18 Flume HelloWorld 实现Source Channel Sink 控制台流式收集

武子康

Apache 大数据 hadoop flume

qData开源数据中台性能问题说明与优化建议

千桐科技

数据中台 数据治理 数据开发 大数据平台 数据集成

怎么做黑龙江等保,做黑龙江等保有哪些流程?

等保测评

程序员秋招Java开发工作太难找了!根本没岗位!普通程序员如何破局?

程序员高级码农

程序员‘ Java 面试题

GitHub MCP Server - 无缝集成GitHub API的自动化工具

qife

Go GitHub 自动化

告别盲测时代,用 Playwright 全链路追踪,一键锁定问题!

测试人

软件测试

【HarmonyOS 5】应用更新功能详解

深海的鲸同学 luvi

AppGallery Connect HarmonyOS SDK应用服务 应用更新

鸿蒙系统级AI能力全面赋能,华为阅读为生态伙伴和开发者带来效率提升

最新动态

Windows 7 10 11 2008R2 2016 2019 2022 2025 (updated Jun 2025) 2025 年 6 月更新

sysin

windows

全场景车辆服务数字化平台

微擎应用市场

大模型推理显存和计算量估计方法

AI布道Mr.Jin

哈尔滨三级等保有什么作用?

等保测评

字节的prompt优化平台限时免费开放

大林

AI 提示词

智慧园区管理系统(源码+文档+讲解+演示)

深圳亥时科技

鸿蒙 Column 组件指南:垂直布局核心技术与场景化实践

谢道韫

Nexpose 8.11.0 for Linux & Windows - 漏洞扫描

sysin

大数据-19 Flume Agent采集数据至HDFS集群 监听Hive日志 操作记录写入

武子康

大数据 hadoop hdfs hive flume

华为发布伙伴SDK优选库,并推动SDK安全隐私新标准制定

HarmonyOS SDK

harmoyos

基于YOLOv8的疲劳状态识别项目|完整源码数据集+PyQt5界面+完整训练流程+开箱即用!

申公豹

yolov8

从新一代昇腾AI云服务,俯瞰AI算力的云上变局

脑极体

AI

黑龙江腾讯云:科技赋能新未来

等保测评

苹果电脑steam游戏打不开怎么办?Mac版的steam连接报错的原因及解决方案

阿拉灯神丁

steam CrossOver Mac下载 如何在Mac上运行win游戏 雷神加速器

成功案例丨汽车塑料尾门模态分析优化及对标

Altair RapidMiner

仿真 CAE hyperworks OptiStruct 结构优化

华为云CloudDevice亮相HDC 2025:以新一代云终端驱动行业智能应用创新

业界

36小时代码交锋!HarmonyOS极客马拉松2025圆满收官

最新动态

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