javascript - 移动焦点() - Angular 5

Question

我在 Angular 5 中有以下代码:

<select class="abc" (change)="items($event)"  required>

            <option value="1">1</option>
              <option value="2">2</option>
                <option value="3">3</option>
                  <option value="4">4</option>
                    <option value="5">5</option>
          </select>

当用户选择上述任何特定选项时，焦点将转到所选选项。我试图让任何选定的选项失去焦点(在用户选择任何选项之后)，并且希望将焦点转移到 DOM 的不同元素上(如果需要)。我尝试了 getElementById 和 focus() 但它似乎不起作用。

items(event)
  {
    ABC Code;
    Shifting focus code goes here;
  }

Answer 1

这是使用 Renderer2 的 Angular 方式的工作解决方案

HTML:

<select class="abc" (change)="change()"  required>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>


<input type="text" id="myInput">
<input type="text">

组件:

import { Component, Renderer2 } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  constructor(public renderer2: Renderer2){

  }

  change(){
     let onElement = this.renderer2.selectRootElement('#myInput');
 onElement.focus();
  }

 }

Here is a working DEMO