有人知道如何获取组件模板中定义的元素吗?聚合物让$和$$变得很容易。
我只是想知道如何在Angular中实现它。
以教程中的例子为例:
import {Component} from '@angular/core';
@Component({
selector:'display',
template:`
<input #myname (input)="updateName(myname.value)"/>
<p>My name : {{myName}}</p>
`
})
export class DisplayComponent {
myName: string = "Aman";
updateName(input: String) {
this.myName = input;
}
}
我如何从类定义中捕获或获得p或输入元素的引用?
从列表中选择目标元素。从相同的元素列表中选择特定的元素是很容易的。
组件代码:
export class AppComponent {
title = 'app';
listEvents = [
{'name':'item1', 'class': ''}, {'name':'item2', 'class': ''},
{'name':'item3', 'class': ''}, {'name':'item4', 'class': ''}
];
selectElement(item: string, value: number) {
console.log("item="+item+" value="+value);
if(this.listEvents[value].class == "") {
this.listEvents[value].class='selected';
} else {
this.listEvents[value].class= '';
}
}
}
html代码:
<ul *ngFor="let event of listEvents; let i = index">
<li (click)="selectElement(event.name, i)" [class]="event.class">
{{ event.name }}
</li>
css代码:
.selected {
color: red;
background:blue;
}
注意:这并不适用于Angular 6及以上版本,因为ElementRef变成了ElementRef<T>, T表示nativeElement的类型。
我想补充一点,如果您正在使用ElementRef,正如所有答案所推荐的那样,那么您将立即遇到一个问题,即ElementRef有一个看起来很糟糕的类型声明
export declare class ElementRef {
nativeElement: any;
}
这在一个nativeElement是HTMLElement的浏览器环境中是愚蠢的。
要解决这个问题,您可以使用以下技术
import {Inject, ElementRef as ErrorProneElementRef} from '@angular/core';
interface ElementRef {
nativeElement: HTMLElement;
}
@Component({...}) export class MyComponent {
constructor(@Inject(ErrorProneElementRef) readonly elementRef: ElementRef) { }
}
从列表中选择目标元素。从相同的元素列表中选择特定的元素是很容易的。
组件代码:
export class AppComponent {
title = 'app';
listEvents = [
{'name':'item1', 'class': ''}, {'name':'item2', 'class': ''},
{'name':'item3', 'class': ''}, {'name':'item4', 'class': ''}
];
selectElement(item: string, value: number) {
console.log("item="+item+" value="+value);
if(this.listEvents[value].class == "") {
this.listEvents[value].class='selected';
} else {
this.listEvents[value].class= '';
}
}
}
html代码:
<ul *ngFor="let event of listEvents; let i = index">
<li (click)="selectElement(event.name, i)" [class]="event.class">
{{ event.name }}
</li>
css代码:
.selected {
color: red;
background:blue;
}