Question

我想专注于使用Angular2的特定元素。

该应用包含可以选择或创建的项目列表。选择或创建项目时，将在父组件中调用相应的函数，并将正确的数据异步加载（使用jQuery）到支持表单的模型中。

newValue(){
    this.valueSelected = true;

    //do something to focus here

    //complex asynchronous item creation code acquiring a template from the database
}

selectValue(val: Value) {
    this.dialog.conditionallyShowDialog(this.hasChanges(), "The item is edited, are you sure you want to change item.", "Warning!").subscribe(confirm => {
        if (confirm) {
            this.valueSelected = true;

            //do something to focus here

            //complex asynchronous loading code involving the database
        });
}

表单隐藏在ngif中，此时可能存在也可能不存在，具体取决于是否已选择某个项目。

<form id="app-form" *ngIf="valueSelected">
        <!--Short text input field-->
        <input-component #firstInForm preText="first text" [isDisabled]="!selectedValue.internalyInitialized"
                         inputId="form-first-text" placeholder="first text" [(text)]="selectedValue.firstText"
                         [validator]="firstTextValidator" (validateCallback)="validate($event)"></input-component>
        <!--Long text input field-->
        <input-component preText="other text" [useTextArea]="true" [isDisabled]="!selectedValue.internalyInitialized"
                         inputId="form-other-text" placeholder="other" [(text)]="selectedValue.otherText"
                         [validator]="otherTextValidator" (validateCallback)="validate($event)"></input-component>

        .....

</form>

表单包含包含文本区域或输入字段

的InputComponents

        <input #inputRef *ngIf="!useTextArea" id="{{inputId}}" autocomplete="off" [disabled]="isDisabled" (keyup)="localChange($event)" [ngModelOptions]="{standalone:true}" [(ngModel)]="text" name="{{preText}}" 
        type="text" class="input-format" [ngStyle]="{'text-transform': textTransform}" placeholder="{{placeholder}}" [readonly]="isReadOnly()" />

        <textarea #textRef *ngIf="useTextArea" id="{{inputId}}" (keyup)="localChange($event)" [ngModelOptions]="{standalone:true}" [(ngModel)]="text" name="{{preText}}" 
        class="input-format" [ngStyle]="{'text-transform': textTransform}" placeholder="{{placeholder}}" [disabled]="isDisabled" [readonly]="isReadOnly()"></textarea>

我想在选择或创建新项目时专注于第一个InputComponents中的正确输入。

我找到了几种关注输入的方法，但在这种情况下似乎都没有。见：

Angular 2: Focus on newly added input element

Angular2 - Focusing a textbox on component load

我如何随时关注ngIf内部组件内的元素？

0 个答案: