在我的应用程序中,我想在组件加载时自动将焦点放在表单的第一个字段上.任何人都可以指导如何实现这一点而不重复,因为我想在我的应用程序中的每个表单(活动表单)上.
您应该使用指令来实现此行为.
原文链接:https://www.f2er.com/angularjs/141532.html这将告诉你如何做到这一点:https://plnkr.co/edit/ttxCP7vCLkLtNb3Xiaah?p=preview
import {Component,NgModule,Directive,ElementRef,Renderer} from '@angular/core' import {BrowserModule} from '@angular/platform-browser' @Directive({ selector: 'form[anyNameHere]' }) export class SelectFirstInputDirective { constructor(private _eRef: ElementRef,private _renderer : Renderer) { } private _getInputElement(nativeElement: any): any { if (!nativeElement || !nativeElement.children) return undefined; if (!nativeElement.children.length && nativeElement.localName === 'input' && !nativeElement.hidden) return nativeElement; let input; [].slice.call(nativeElement.children).every(c => { input = this._getInputElement(c); if (input) return false; // break return true; // continue! }); return input; } ngAfterViewInit() { let formChildren = [].slice.call(this._eRef.nativeElement.children); formChildren.every(child => { let input = this._getInputElement(child); if (input) { this._renderer.invokeElementMethod(input,'focus',[]); return false; // break! } return true; // continue! }); } } @Component({ selector: 'my-app',template: ` <div> <h2>Hello {{name}}</h2> <form anyNameHere> <div class="form-group"> <input hidden formcontrolname="firstName" type="text" class="form-control input-sm ng-pristine ng-valid ng-touched" placeholder="First Name" id="firstName"> <label class="col-sm-3 control-label" for="firstName">Name</label> <div class="col-sm-9 form-inline"> <div class="form-group"> <div class="col-sm-12"> <input formcontrolname="firstName" type="text" class="form-control input-sm ng-pristine ng-valid ng-touched" placeholder="First Name" id="firstName"> </div> </div> <div class="form-group"> <div class="col-sm-12"> <input formcontrolname="lastName" type="text" class="form-control input-sm ng-untouched ng-pristine ng-valid" placeholder="Last Name" id="lastName"> </div> </div> </div> </div> </form> </div> `,}) export class App { constructor() { this.name = 'Angular2' } } @NgModule({ imports: [ BrowserModule ],declarations: [ App,SelectFirstInputDirective ],bootstrap: [ App ] }) export class AppModule {}