有人知道如何获取组件模板中定义的元素吗?聚合物让$和$$变得很容易。
我只是想知道如何在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或输入元素的引用?
当前回答
要获得紧邻的下一个兄弟姐妹，使用这个
event.source._elementRef.nativeElement.nextElementSibling
其他回答
import { Component, ElementRef, OnInit } from '@angular/core';
@Component({
selector:'display',
template:`
<input (input)="updateName($event.target.value)">
<p> My name : {{ myName }}</p>
`
})
class DisplayComponent implements OnInit {
constructor(public element: ElementRef) {
this.element.nativeElement // <- your direct element reference
}
ngOnInit() {
var el = this.element.nativeElement;
console.log(el);
}
updateName(value) {
// ...
}
}
示例已更新以使用最新版本
有关本机元素的更多详细信息，请点击这里
角4 +: 使用渲染器。使用CSS选择器来访问元素。
我有一个最初显示电子邮件输入的表单。输入电子邮件后，表单将被扩展，允许他们继续添加与他们的项目相关的信息。但是，如果他们不是现有的客户，表单将在项目信息部分上面包含一个地址部分。
到目前为止，数据输入部分还没有被分解成组件，所以这些部分是用*ngIf指令管理的。如果他们是现有客户，我需要将焦点设置在项目笔记字段，如果他们是新客户，则需要将焦点设置在名字字段。
我尝试了这些解决方案，但没有成功。然而，这个答案中的更新3给了我最终解决方案的一半。另一半来自MatteoNY的回复。结果是:
import { NgZone, Renderer } from '@angular/core';
constructor(private ngZone: NgZone, private renderer: Renderer) {}
setFocus(selector: string): void {
this.ngZone.runOutsideAngular(() => {
setTimeout(() => {
this.renderer.selectRootElement(selector).focus();
}, 0);
});
}
submitEmail(email: string): void {
// Verify existence of customer
...
if (this.newCustomer) {
this.setFocus('#firstname');
} else {
this.setFocus('#description');
}
}
因为我所做的唯一一件事是将焦点设置在一个元素上，所以我不需要关心更改检测，所以我实际上可以运行对renderer的调用。在Angular外部选择trootelement。因为我需要给新部分时间来呈现，元素部分被包裹在一个超时中，以允许呈现线程在尝试元素选择之前有时间赶上。一旦所有这些设置，我可以简单地调用元素使用基本的CSS选择器。
我知道这个例子主要处理的是焦点事件，但是我很难理解这个例子不能用于其他上下文中。
更新:Angular在Angular 4中放弃了对Renderer的支持，并在Angular 9中完全删除了它。这个解决方案不应该受到迁移到Renderer2的影响。请参阅此链接以了解更多信息: Renderer迁移到Renderer2
从列表中选择目标元素。从相同的元素列表中选择特定的元素是很容易的。
组件代码:
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;
}
你可以通过ElementRef将DOM元素的句柄注入到组件的构造函数中:
constructor(private myElement: ElementRef) { ... }
文档:https://angular.io/docs/ts/latest/api/core/index/ElementRef-class.html
要获得紧邻的下一个兄弟姐妹，使用这个
event.source._elementRef.nativeElement.nextElementSibling
