Получить элемент непостоянного вложенного дочернего компонента

Question

У меня есть родительский компонент, который после некоторых действий будет вызывать дочерний компонент после того, как ngIf вернет true, и у этого дочернего компонента есть элемент Input, на котором я хочу сосредоточиться. Поскольку дочерний компонент не создается, когда родительский, использование ViewChild, похоже, не работает для меня. Я приближаюсь к хорошей стратегии, чтобы сфокусировать этот ввод с помощью службы, но на самом деле мне удается получить ссылку на этот ввод, когда это необходимо, я считаю трудным.

Answer 1

Вы можете попробовать установить атрибут автофокусировка для входа.

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

Вам не нужно делать что-то более сложное, чем это (то есть не нужно никаких услуг).