有人知道如何获取组件模板中定义的元素吗?聚合物让$和$$变得很容易。
我只是想知道如何在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或输入元素的引用?
当前回答
对于那些试图在*ngIf或*ngSwitchCase中获取组件实例的人，你可以遵循这个技巧。
创建一个init指令。
import {
Directive,
EventEmitter,
Output,
OnInit,
ElementRef
} from '@angular/core';
@Directive({
selector: '[init]'
})
export class InitDirective implements OnInit {
constructor(private ref: ElementRef) {}
@Output() init: EventEmitter<ElementRef> = new EventEmitter<ElementRef>();
ngOnInit() {
this.init.emit(this.ref);
}
}
导出名称为myComponent的组件
@Component({
selector: 'wm-my-component',
templateUrl: 'my-component.component.html',
styleUrls: ['my-component.component.css'],
exportAs: 'myComponent'
})
export class MyComponent { ... }
使用这个模板获取ElementRef和MyComponent实例
<div [ngSwitch]="type">
<wm-my-component
#myComponent="myComponent"
*ngSwitchCase="Type.MyType"
(init)="init($event, myComponent)">
</wm-my-component>
</div>
在TypeScript中使用此代码
init(myComponentRef: ElementRef, myComponent: MyComponent) {
}
其他回答
要获得紧邻的下一个兄弟姐妹，使用这个
event.source._elementRef.nativeElement.nextElementSibling
对于那些试图在*ngIf或*ngSwitchCase中获取组件实例的人，你可以遵循这个技巧。
创建一个init指令。
import {
Directive,
EventEmitter,
Output,
OnInit,
ElementRef
} from '@angular/core';
@Directive({
selector: '[init]'
})
export class InitDirective implements OnInit {
constructor(private ref: ElementRef) {}
@Output() init: EventEmitter<ElementRef> = new EventEmitter<ElementRef>();
ngOnInit() {
this.init.emit(this.ref);
}
}
导出名称为myComponent的组件
@Component({
selector: 'wm-my-component',
templateUrl: 'my-component.component.html',
styleUrls: ['my-component.component.css'],
exportAs: 'myComponent'
})
export class MyComponent { ... }
使用这个模板获取ElementRef和MyComponent实例
<div [ngSwitch]="type">
<wm-my-component
#myComponent="myComponent"
*ngSwitchCase="Type.MyType"
(init)="init($event, myComponent)">
</wm-my-component>
</div>
在TypeScript中使用此代码
init(myComponentRef: ElementRef, myComponent: MyComponent) {
}
如果你正在使用Angular Material，你可以利用cdkFocusInitial指令。
示例:<input matInput cdkFocusInitial>
点击此处阅读更多信息: https://material.angular.io/cdk/a11y/overview#regions
而不是注入ElementRef并从那里使用querySelector或类似的方法，可以使用声明式的方式来直接访问视图中的元素:
<input #myname>
@ViewChild('myname') input;
元素
ngAfterViewInit() {
console.log(this.input.nativeElement.value);
}
StackBlitz例子
@ViewChild()支持指令或组件类型作为参数，或模板变量的名称(字符串)。 @ViewChildren()还支持以逗号分隔的名称列表(目前不允许@ViewChildren('var1,var2,var3'))。 @ContentChild()和@ContentChildren()做同样的事情，但在轻DOM中(<ng-content>投影元素)。
的后代
@ContentChildren()是唯一一个允许查询后代的
@ContentChildren(SomeTypeOrVarName, {descendants: true}) someField;
{descendants: true}应该是默认值，但在2.0.0 final中不存在，它被认为是一个bug 这在2.0.1中被修复
read
如果有组件和指令，read参数允许指定应该返回哪个实例。
例如，动态创建的组件需要ViewContainerRef，而不是默认的ElementRef
@ViewChild('myname', { read: ViewContainerRef }) target;
订阅的变化
尽管视图子函数只在调用ngAfterViewInit()时设置，而内容子函数只在调用ngAfterContentInit()时设置，如果你想订阅查询结果的更改，应该在ngOnInit()中完成。
https://github.com/angular/angular/issues/9689#issuecomment-229247134
@ViewChildren(SomeType) viewChildren;
@ContentChildren(SomeType) contentChildren;
ngOnInit() {
this.viewChildren.changes.subscribe(changes => console.log(changes));
this.contentChildren.changes.subscribe(changes => console.log(changes));
}
直接DOM访问
只能查询DOM元素，不能查询组件或指令实例:
export class MyComponent {
constructor(private elRef:ElementRef) {}
ngAfterViewInit() {
var div = this.elRef.nativeElement.querySelector('div');
console.log(div);
}
// for transcluded content
ngAfterContentInit() {
var div = this.elRef.nativeElement.querySelector('div');
console.log(div);
}
}
获取任意投影内容
参见访问传输的内容
从@angular/core中导入ViewChild装饰器，如下所示:
HTML代码:
<form #f="ngForm">
...
...
</form>
TS代码:
import { ViewChild } from '@angular/core';
class TemplateFormComponent {
@ViewChild('f') myForm: any;
.
.
.
}
现在你可以使用'myForm'对象来访问类中的任何元素。
源
