angular - 自动对焦在 Angular 4 下不起作用

Question

我需要在 ngfor 循环内自动聚焦一个元素。

这是我的 chat.component.html

<div *ngFor="let chat of chats; let last = last">
  {{ chat.chat }} <span *ngIf="last;" autofocus></span>
</div>

实际上，通过使用按钮单击，我正在显示此聊天弹出窗口，我需要自动聚焦上次聊天。

我的 chat.ts 文件

import {  Component, OnInit } from '@angular/core';
import { AuthService } from '../../services/auth.service';
import * as io from "socket.io-client";

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

export class LsidebarComponent implements OnInit {
  chat:String;
  showChat:Boolean;
  chats:any[];
  fanmateId:String;
  socket = io('http://localhost:3000');

  constructor(private authService:AuthService) { }

  ngOnInit() {

    this.showFans = false;
    this.showChat = false;
    this.getFanmates();
    this.chatss();
  }


  getChat(fanmateId,name){
    this.showChat = !this.showChat;
    this.chatname = name;
    this.fanmateId = fanmateId;
    const temp = {
        fanmate_id: fanmateId
    }
    this.getChats(temp);

  }
  getChats(temp){
    this.chats = [];
    this.authService.getChat(temp);

  }
  chatss(){
    this.socket.on('chatRes',function(chats){

      this.chats = chats.chats[0].messages;

    }.bind(this));

    this.socket.on('addChat',function(chats){

      this.chat = '';
      // console.log(chats);
    }.bind(this));
  }
}

有什么建议可以让我在谷歌上的这个自动对焦上搜索 angular 4。

Answer 1

autofocus属性适用于 <button>, <input>, <keygen>, <select>和 <textarea> .阅读本文 documentation .

您需要设置一个 tabindex您的 span 上的属性并在 ngAfterViewInit() 中手动对焦.

<div *ngFor="let chat of chats; let last = last">
  {{ chat.chat }} 
  <span *ngIf="last;" #lastChat tabindex="9999"></span>
</div>

在你 ts代码:

@ViewChild('lastChat') lastChat:HTMLElement;
ngAfterViewInit(){
    this.lastChat.nativeElement.focus();
  } 

链接到 working demo .