将 #element 绑定到使用 *ngFor 创建的元素
bind #element to element created with *ngFor
我正在使用 *ngFor 创建一堆 div。我想把手放在其中一个上,看看它的宽度。
.html
<div #elReference *ngFor="let el of elements> HEHE </div>
.ts
@ViewChild("elReference") elReference: ElementRef;
显然,您不能将 ViewChild 与 *ngFor 一起使用,因为 elReference
仍未定义。
如何获取使用 *ngFor 创建的元素引用?
无法选择性地添加模板变量,
但您可以有选择地添加标记,然后按该标记进行过滤:
<div #elReference [attr.foo]="el.x == 'foo' ? true : null" *ngFor="let el of elements> HEHE </div>
@ViewChildren("elReference") elReference: QueryList<ElementRef>;
ngAfterViewInit() {
console.log(this.elReference.toArray()
.filter(r => r.nativeElement.hasAttribute('foo')));
}
有一个更复杂但更正确的指令方法。
<!-- app.component.html -->
<div *ngFor="let el of elements" [id]="el.id"> HEHE </div>
// div-id.directive.ts
import { Directive, Input, ElementRef } from '@angular/core';
@Directive({
selector: 'div[id]',
})
export class DivIdDirective {
@Input() id: number;
constructor(ref: ElementRef<HTMLDivElement>) {
this.el = ref.nativeElement;
}
el: HTMLDivElement;
}
// app.component.ts
export class AppComponent implements AfterViewInit {
// ...
@ViewChildren(DivIdDirective) els: QueryList<DivIdDirective>;
ngAfterViewInit(): void {
console.log(this.els.map(({id, el}) => ({id, el}));
}
}
我正在使用 *ngFor 创建一堆 div。我想把手放在其中一个上,看看它的宽度。
.html
<div #elReference *ngFor="let el of elements> HEHE </div>
.ts
@ViewChild("elReference") elReference: ElementRef;
显然,您不能将 ViewChild 与 *ngFor 一起使用,因为 elReference
仍未定义。
如何获取使用 *ngFor 创建的元素引用?
无法选择性地添加模板变量, 但您可以有选择地添加标记,然后按该标记进行过滤:
<div #elReference [attr.foo]="el.x == 'foo' ? true : null" *ngFor="let el of elements> HEHE </div>
@ViewChildren("elReference") elReference: QueryList<ElementRef>;
ngAfterViewInit() {
console.log(this.elReference.toArray()
.filter(r => r.nativeElement.hasAttribute('foo')));
}
有一个更复杂但更正确的指令方法。
<!-- app.component.html -->
<div *ngFor="let el of elements" [id]="el.id"> HEHE </div>
// div-id.directive.ts
import { Directive, Input, ElementRef } from '@angular/core';
@Directive({
selector: 'div[id]',
})
export class DivIdDirective {
@Input() id: number;
constructor(ref: ElementRef<HTMLDivElement>) {
this.el = ref.nativeElement;
}
el: HTMLDivElement;
}
// app.component.ts
export class AppComponent implements AfterViewInit {
// ...
@ViewChildren(DivIdDirective) els: QueryList<DivIdDirective>;
ngAfterViewInit(): void {
console.log(this.els.map(({id, el}) => ({id, el}));
}
}