使用Angular中的动画搜索框关注输入字段

Question

我有一个动画搜索框，当您点击类btn-search的链接时，它会在搜索表单中显示和滑动。

我想在搜索表单显示时关注输入字段。

我已将#searchInput添加到输入标记并使用ViewChild和ngAfterViewInit。但它不起作用并显示我的错误。 有人可以帮我这个吗？ 非常感谢你。

Nav.component.html

<div class="btn-nav navbar-right">
    <a href="#" class="btn-sm btn-default btn-search" (click)="clickSearchForm()">
      Search
    </a>
</div>
<div class="nav-search clearfix" *ngIf="isSeachForm" [@slideInOut]>
    <form class="navtop navbar-form home-search" role="search">
        <div class="search-group">
            <div class="input-group clearfix" id="nav-search-input">
                <input #seachInput type="text" class="form-control dropdown-toggle" placeholder="Search">
            </div>
        </div>
    </form>
</div>

Nav.component.ts

isSeachForm: boolean = false;
@ViewChild('seachInput') searchElementRef: ElementRef;

clickSearchForm() {
    this.isSeachForm = true;
    this.searchElementRef.nativeElement.focus();
}
ngAfterViewInit(): void {
    this.searchElementRef.nativeElement.focus();
}

Answer 1

引用* ngIf内部的elementRef会导致这种情况，因为组件初始化时元素不存在。最简单的解决方法应该是：

<div class="nav-search clearfix" 
[style.display]="isSeachForm ? 'block' : 'none'" [@slideInOut]>

编辑：这可能会破坏你的动画，但我相信你可以找到另一种方法来进行滑动。