专注于 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]>

编辑：虽然这可能会破坏您的动画，但我相信您可以找到另一种滑动方式。