当引用一个可以隐藏/“销毁”的输入时(因为*ngIf
使用了,并且某些元素被销毁了),即使元素存在于以下变量中,通过井号标签语法创建的局部变量#
(#test
在下面的示例中)也不起作用。这一页。
代码是:
@Component({
selector: 'my-app',
template: `<h1>My First Angular 2 App</h1>
<button (click)="focusOther(test)">test</button>
<input #test *ngIf="boolValue" >
`
})
export class AppComponent {
private isVisible = false;
focusOther(testElement){
this.isVisible = true;
alert(testElement);
testElement.focus();
}
}
警报显示undefined
,因为没有任何内容传递给该功能。
有解决方案可以使其正常工作吗?我的目标是关注将要创建的元素。
马克·拉杰科克(Mark Rajcok)给出的解决方案:使用afterViewInit编写一条指令,该指令使用elementRef并在该元素上调用.focus()。
有关第1部分的工作版本,请参阅此插件:http ://plnkr.co/edit/JmBBHMo1hXLe4jrbpVdv?p=preview
解决了“创建后聚焦”的问题后,我需要一种重新聚焦组件的方法,例如在“ test.focus()”中(其中#test是输入的局部变量名称,但不能就像我之前演示的那样使用)。
Mark Rajcok提供的多种解决方案
至于焦点问题的解决方案,您可以创建一个属性指令focusMe
:
import {Component, Directive, ElementRef} from 'angular2/core';
@Directive({
selector: '[focusMe]'
})
export class FocusDirective {
constructor(private el: ElementRef) {}
ngAfterViewInit() {
this.el.nativeElement.focus();
}
}
@Component({
selector: 'my-app',
directives: [FocusDirective],
template: `<h1>My First Angular 2 App</h1>
<button (click)="toggle()">toggle</button>
<input focusMe *ngIf="isVisible">
`
})
export class AppComponent {
constructor() { console.clear(); }
private isVisible = false;
toggle() {
this.isVisible = !this.isVisible;
}
}
更新1:为重新对焦功能添加解决方案:
import {Component, Directive, ElementRef, Input} from 'angular2/core';
@Directive({
selector: '[focusMe]'
})
export class FocusMe {
@Input('focusMe') hasFocus: boolean;
constructor(private elementRef: ElementRef) {}
ngAfterViewInit() {
this.elementRef.nativeElement.focus();
}
ngOnChanges(changes) {
//console.log(changes);
if(changes.hasFocus && changes.hasFocus.currentValue === true) {
this.elementRef.nativeElement.focus();
}
}
}
@Component({
selector: 'my-app',
template: `<h1>My First Angular 2 App</h1>
<button (click)="showInput()">Make it visible</button>
<input *ngIf="inputIsVisible" [focusMe]="inputHasFocus">
<button (click)="focusInput()" *ngIf="inputIsVisible">Focus it</button>
`,
directives:[FocusMe]
})
export class AppComponent {
private inputIsVisible = false;
private inputHasFocus = false;
constructor() { console.clear(); }
showInput() {
this.inputIsVisible = true;
}
focusInput() {
this.inputHasFocus = true;
setTimeout(() => this.inputHasFocus = false, 50);
}
}
setTimeout()
将焦点属性重置为的另一种方法是false
在FocusDirective上创建事件/输出属性,并emit()
在focus()
调用时创建事件。然后,AppComponent将侦听该事件并重置focus属性。
更新2:这是使用ViewChild添加重新对焦功能的另一种/更好的方法。我们不需要以这种方式跟踪焦点状态,也不需要在FocusMe指令上使用input属性。
import {Component, Directive, ElementRef, Input, ViewChild} from 'angular2/core';
@Directive({
selector: '[focusMe]'
})
export class FocusMe {
constructor(private elementRef: ElementRef) {}
ngAfterViewInit() {
// set focus when element first appears
this.setFocus();
}
setFocus() {
this.elementRef.nativeElement.focus();
}
}
@Component({
selector: 'my-app',
template: `<h1>My First Angular 2 App</h1>
<button (click)="showInput()">Make it visible</button>
<input *ngIf="inputIsVisible" focusMe>
<button (click)="focusInput()" *ngIf="inputIsVisible">Focus it</button>
`,
directives:[FocusMe]
})
export class AppComponent {
@ViewChild(FocusMe) child;
private inputIsVisible = false;
constructor() { console.clear(); }
showInput() {
this.inputIsVisible = true;
}
focusInput() {
this.child.setFocus();
}
}
更新3:这是另一种不需要指令的替代方法,该指令仍然使用ViewChild,但是我们通过本地模板变量而不是属性指令访问子级(感谢@alexpods作为提示):
import {Component, ViewChild, NgZone} from 'angular2/core';
@Component({
selector: 'my-app',
template: `<h1>Focus test</h1>
<button (click)="showInput()">Make it visible</button>
<input #input1 *ngIf="input1IsVisible">
<button (click)="focusInput1()" *ngIf="input1IsVisible">Focus it</button>
`,
})
export class AppComponent {
@ViewChild('input1') input1ElementRef;
private input1IsVisible = false;
constructor(private _ngZone: NgZone) { console.clear(); }
showInput() {
this.input1IsVisible = true;
// Give ngIf a chance to render the <input>.
// Then set the focus, but do this outside the Angualar zone to be efficient.
// There is no need to run change detection after setTimeout() runs,
// since we're only focusing an element.
this._ngZone.runOutsideAngular(() => {
setTimeout(() => this.focusInput1(), 0);
});
}
setFocus(elementRef) {
elementRef.nativeElement.focus();
}
ngDoCheck() {
// if you remove the ngZone stuff above, you'll see
// this log 3 times instead of 1 when you click the
// "Make it visible" button.
console.log('doCheck');
}
focusInput1() {
this.setFocus(this.input1ElementRef);
}
}
更新4:我更新了更新3中的代码以使用NgZone,这样我们就不会导致Angular的更改检测算法在setTimeout()
完成后运行。(有关更改检测的更多信息,请参见此答案)。
更新5:我更新了上述插件中的代码,以使用Renderer使其网络工作者安全。不建议focus()
直接访问nativeElement
。
focusInput1() {
this._renderer.invokeElementMethod(
this.input1ElementRef.nativeElement, 'focus', []);
}
我从这个问题中学到很多东西。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句