获取非永久嵌套子组件的元素

Posted 2023-03-13

【中文标题】获取非永久嵌套子组件的元素

【英文标题】：Get element of nonpermanent nested child component

【发布时间】：2019-04-16 18:00:55

【问题描述】：

我有一个父组件，在某些操作后 ngIf 返回 true 后会调用一个子组件，并且这个子组件有一个我想要关注的 Input 元素。因为父组件没有实例化子组件，所以使用 ViewChild 似乎对我不起作用。我正在接近一个很好的策略，将这个输入集中在一个服务上，但实际上在需要时设法获得对这个输入的引用，我发现这很困难。

【问题讨论】：

你有没有尝试关注子组件的输入元素onInit()？

【参考方案1】：

您可以尝试设置输入的autofocus属性。

<input ... autofocus="true">

如果这不起作用，那么您可以创建一个指令，在创建 DOM 元素后强制输入接收焦点。这是我一直在使用的一个指令，它可以选择通过 JS 摘要延迟设置焦点，这对于一些困难的组件安排很方便。

@Directive(
    selector: '[ui-focus]'
)
export class FocusDirective implements AfterViewInit 
    /**
     * The number of javascript digestions to complete before setting focus.
     */
    @Input()
    public focusDelay: string | boolean | number = 0;

    /**
     * Conditionally control if focus should be set.
     */
    @Input()
    public focusEnabled: boolean = true;

    private counter: number;

    public constructor(private el: ElementRef) 
    

    public ngAfterViewInit(): void 
        if (Boolean(this.focusEnabled)) 
            this.counter = this.focusDelay === true ? 1 : parseInt(this.focusDelay + '', 10);
            this.setFocus();
        
    

    private setFocus() 
        if (this.counter <= 0) 
            (<htmlElement>this.el.nativeElement).focus();
         else 
            this.counter--;
            window.setTimeout(() => this.setFocus());
        
    

然后您可以将指令分配给输入控件。

<input ... ui-focus>

您不应该做任何比这更复杂的事情（即不需要服务）。

【讨论】：

我已经尝试过自动对焦属性，但情况稍微复杂一点，因为此输入可以多次出现并重新出现，并且在第一次实例之后自动对焦似乎不起作用。我会尝试一下这些其他技巧。