各种学习后的知识点整理归纳,非原创!
<img [src]="imgUrl" />
<td [attr.colspan]="colspan">td>
<p [class.active]="true">p>
<p [ngClass]="{'a-name':true,'b-name':false}">p>
<p [style.width]="isDefault ? '100px' : '200px'">p>
<p [ngStyle]="{'width':100px,'height':'200px'}">p>
<p (click)="show($event)">p>
<p (click)="show()">p>
<input type="text" (keyup.enter)="show($event)" />
// ts中定义函数show
show(event:Event){
//...
}
举例:获取文本框中输入的值。
<input type="text" (keyup.enter)="getValue(username.value)" #username />、
// 在ts中定义模板变量和接收方法
// 该变量此处不定义也可以获取到,能正常运行。但是在ng build时可能会编译失败,有严格模式。
@ViewChild('username') username: ElementRef<HTMLParagraphElement | undefined>;
getValue(value: Event) {
console.log("value", value)
}
- @ViewChild属性装饰器,用来从模板视图中获取匹配的元素。
- 视图查询在ngAfterViewInit钩子函数调用前完成,所以在该函数中才能获取到查询元素。
稍微有点详细的用法:angular知识点–@ViewChild详解
举例1: 使用ViewChild装饰器获取一个元素
<p #pName> hello! p>
// 在ts中定义该模板变量
@ViewChild("pName") pElement:ElementRef<HTMLParagraphElement> | undefined;
ngAfterViewInit(){
console.log("pName", this.pName && this.pName.nativeElement);
}
输出截图:(截图放错了,应该输出的时hello!)
举例2: 使用ViewChildren装饰器获取一组元素
<ul>
<li #items>ali>
<li #items>bli>
<li #items>cli>
<li #items>dli>
ul>
@ViewChildren("items") liElements:QueryList<HTMLElement> | undefined;
ngAfterViewInit(){
console.log("items",this.liElements)
console.log("items",this.liElements.toArray())
}
举例:在input文本框内输入值的时候,userName值一直在改变。在组件类的方法中也在影响着组件模板中的值。
<input type="text" [(ngModule)]="userName" />
<button (click)="changeValue()">在组件类中更改button>
// ts
userName:string="";
changeValue(){
this.userName="hello angular";
}
可理解为css选择器,作用是类似的。
类型 | 用法 |
---|---|
html标签 | select=“标签” |
css类名 | select=“.类名” |
自定义组件名称 | select=“组件名” |
自定义属性名称 | select=“[属性名]” |
举例:场景:制作一个可复用的导航栏(NavComponent),导航栏的内容可动态变化
一个ng-content,不使用select选择器
<div class="nav-wrapper">
<span>返回span>
<div class="content">
<ng-content>ng-content>
div>
div>
<app-nav>
<p>测试文字p>
app-nav>
<app-nav>
<p>测试文字(默认)p>
<span>匹配标签选择器span>
<P class="head">匹配类选择器P>
<p userName="'nothing'">匹配属性选择器p>
<app-test>app-test>
app-nav>
在app-nav组件内添加多个ng-content与之匹配的选择器。
<div class="nav-wrapper">
<span>返回span>
<div class="content">
<ng-content select="span">ng-content>、
<ng-content select=".head">ng-content>、
<ng-content select="app-test">ng-content>、
<ng-content select="[userName]">ng-content>
div>
div>
结果:
几种处理手段:
<p>{{user?.name}}p> //user存在才会取name值
<p *ngIf="user">{{user.name}}p>
<p> {{user && user.name}}p>