Question

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

Answer 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>

您不必做比这更复杂的事情（即无需服务）。

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

1 个答案: