Angular2 - 在模态加载后关注输入

Question

我在Angular 2中构建了一个组件，我正在尝试将重点放在加载模式后的特定输入上。

以下是我到目前为止所做的事情：

Hello

我的意见是：

@Component({
selector: 'login',
templateUrl: './login.component.html'
})
export class LoginComponent {
  showModal: boolean = false;
  @ViewChild('username1') el: ElementRef;

    constructor(private elementRef: ElementRef, private modalService: ModalService {
    this.modalService.LoginModal.subscribe((show) => {
        this.showModal = show;

        if (show) {
            $('#modal_login_root').modal();
            this.el.nativeElement.focus();
        }
        else {
            $('#modal_login_root').modal('hide');
        }
    });
}

并且它不起作用：（

Answer 1

你不能触发任何功能，除非DOM渲染，等到你的模态渲染然后触发焦点，如果你使用Jquery，那么使用jquery焦点函数..

所以现在你的组件看起来像这样

std::transform(va.begin(), va.end(), std::back_inserter(vb),
    [commonB](A x) -> B { return B(x.a, commonB); });

并且您的HTML看起来像这样

@Component({
selector: 'login',
templateUrl: './login.component.html'
})
export class LoginComponent {
  showModal: boolean = false; 

    constructor(private elementRef: ElementRef, private modalService: ModalService {
    this.modalService.LoginModal.subscribe((show) => {
        this.showModal = show;

        if (show) {
            $('#modal_login_root').modal();
          setTimeout(function(){ 
            $('#username').focus();
           },1000)
        }
        else {
            $('#modal_login_root').modal('hide');
        }
    });
}

Answer 2

只需使用输入字段添加自动对焦

<input type="text" autofocus/>