西安网站建设怎么接单,做社交的招聘网站,嵌入式培训机构,网站网页的像素尺各种学习后的知识点整理归纳#xff0c;非原创#xff01; 组件模板 ① 数据绑定② 属性绑定③ 类名绑定④ 样式绑定⑤ 事件绑定⑥ 获取原生DOM对象6.1 在组件模板中获取6.2 在组件类中获取 ⑦ 双向数据绑定⑧ 内容投影8.1 select选择器8.2 单槽投影8.3 多槽投影 ⑨ 安全操作… 各种学习后的知识点整理归纳非原创 组件模板 ① 数据绑定② 属性绑定③ 类名绑定④ 样式绑定⑤ 事件绑定⑥ 获取原生DOM对象6.1 在组件模板中获取6.2 在组件类中获取 ⑦ 双向数据绑定⑧ 内容投影8.1 select选择器8.2 单槽投影8.3 多槽投影 ⑨ 安全操作符数据绑定的容错处理 ① 数据绑定
将组件类中的数据显示在组件模板中组件类数据发生变化时会自动同步到组件模板中。数据驱动DOM语法{{}}插值表达式。 ② 属性绑定
DOM对象属性
语法[属性名] // 属性名加中括号[]
img [src]imgUrl /HTML标签属性
[attr.属性名] // attr.属性名加中括号[]自定义属性适用于该情况
td [attr.colspan]colspan/td③ 类名绑定
语法1[class.类名]布尔值语法2[ngClass]{ 类名条件 }
p [class.active]true/pp [ngClass]{a-name:true,b-name:false}/p④ 样式绑定
语法1[style.css属性名]条件语法2[ngStyle]{css属性名css属性值}
p [style.width]isDefault ? 100px : 200px/pp [ngStyle]{width:100px,height:200px}/p⑤ 事件绑定
!-- 鼠标单击 --
p (click)show($event)/p
p (click)show()/p!-- 按下enter键触发 --
input typetext (keyup.enter)show($event) /
// ts中定义函数show
show(event:Event){//...
}⑥ 获取原生DOM对象
6.1 在组件模板中获取
举例获取文本框中输入的值。
#userName : 模板变量变量中存储的就是原生Dom对象本身通过事件处理的方式传递到组件类中
!-- 输入完回车之后可以通过定义的 #username 获取输入的值 --input typetext (keyup.enter)getValue(username.value) #username /、// 在ts中定义模板变量和接收方法// 该变量此处不定义也可以获取到能正常运行。但是在ng build时可能会编译失败有严格模式。ViewChild(username) username: ElementRefHTMLParagraphElement | undefined;getValue(value: Event) {console.log(value, value)}6.2 在组件类中获取 ViewChild属性装饰器用来从模板视图中获取匹配的元素。视图查询在ngAfterViewInit钩子函数调用前完成所以在该函数中才能获取到查询元素。 稍微有点详细的用法angular知识点–ViewChild详解
举例1 使用ViewChild装饰器获取一个元素
在组件模板上添加模板变量。在组件类中使用viewChild装饰器获取模板变量。ViewChild是装饰器函数参数是定义的模板变量名pName然后赋值给新的变量pElement也可以理解为取了个别名。 声明该变量的类型undefined可以理解为类型保护不会因为未获取到该元素而报错。
p #pName hello! /p// 在ts中定义该模板变量ViewChild(pName) pElement:ElementRefHTMLParagraphElement | undefined;ngAfterViewInit(){console.log(pName, this.pName this.pName.nativeElement);}输出截图(截图放错了应该输出的时hello) 举例2 使用ViewChildren装饰器获取一组元素
使用ViewChildren() 装饰器从组件模板中获取匹配多个元素返回的结果是一个QueryList集合。 ulli #itemsa/lili #itemsb/lili #itemsc/lili #itemsd/li
/ulViewChildren(items) liElements:QueryListHTMLElement | undefined;ngAfterViewInit(){console.log(items,this.liElements)console.log(items,this.liElements.toArray())}打印1 打印2 ⑦ 双向数据绑定
数据在组件模板和组件类中双向同步。在组件模板中数据做了更改会在组件类中同步跟随变化反之一样常用于表单中所以该模块依赖于angular表单模块需要导入FormsModule。语法[(ngModule)]“变量名”
举例在input文本框内输入值的时候userName值一直在改变。在组件类的方法中也在影响着组件模板中的值。 input typetext [(ngModule)]userName /button (click)changeValue()在组件类中更改/button // tsuserName:string;changeValue(){this.userNamehello angular;}⑧ 内容投影
ng-content也叫内容嵌入是组件的一个高级功能特性。能够很好的扩充组件功能方便代码的复用。常用于用来创建可复用的组件。可以理解为在编写模板组件时使用ng-content做一个占位符引用组件时往此处填充。在定义多个插槽时插槽的顺序就是内容最终的显示顺序。在使用插槽时的内容顺序不会生效另外一篇指路angular知识点–组件内容嵌入
8.1 select选择器
可理解为css选择器作用是类似的。
类型用法html标签select“标签”css类名select“.类名”自定义组件名称select“组件名”自定义属性名称select“[属性名]”
举例场景制作一个可复用的导航栏NavComponent导航栏的内容可动态变化
8.2 单槽投影
一个ng-content不使用select选择器
!-- NavComponent --!-- 一个导航栏左边是返回按钮中间ng-content是可动态替换的内容。 --
div classnav-wrapperspan返回/spandiv classcontentng-content/ng-content/div
/div!-- 在其他组件使用NavComponent 组件--!-- app-nav 中的 p标签的内容会被填充显示到ng-content区域--
app-navp测试文字/p
/app-nav结果
8.3 多槽投影
多个ng-content使用select选择器一个组件多个插槽需要使用select与让插槽与元素有一一对应关系。
在引入的app-nav中添加多个条件的内容让app-nav组件的的select选择器去匹配 在使用插槽的时候不根据在引用组件中定义的内容顺序显示而是根据在定义插槽时排列的顺序。这里使用插槽时顺序与app-nav组件模板中定义的插槽不一致生效的时插槽内的顺序。
app-navp测试文字默认/p !-- 无法匹配到,因为没有符合条件的选择器页面上也不会渲染该节点 --span匹配标签选择器/spanP classhead匹配类选择器/Pp userNamenothing匹配属性选择器/papp-test/app-test !-- 匹配app-test选择器。显示组件内的默认内容app-test works! --/app-nav在app-nav组件内添加多个ng-content与之匹配的选择器。
!-- app-nav组件 --
div classnav-wrapperspan返回/spandiv classcontent!-- 标签 --ng-content selectspan/ng-content、!-- css类名 --ng-content select.head/ng-content、!-- 组件名 --ng-content selectapp-test/ng-content、!-- 自定义属性 --ng-content select[userName]/ng-content/div
/div
结果
除了第一条不符合选择器匹配规则其他的分别都匹配上了 ⑨ 安全操作符数据绑定的容错处理
当属性不存在或者属性为可选的或者对象层级较深angular会有报错
几种处理手段 p{{user?.name}}/p //user存在才会取name值p *ngIfuser{{user.name}}/pp {{user user.name}}/p
