Angular 9 - эквивалент $ (документ) .ready () - PullRequest
Новая
       36

Angular 9 - эквивалент $ (документ) .ready ()

0 голосов
/ 16 марта 2020

Что такое Angular эквивалент $ (document) .ready ()?

Я хочу выполнить метод один раз, когда документ полностью загружен (метод создает компонент внутри моего компонента).

Ни один из angular крюка жизненного цикла не работает (вывод консоли, что this не определен на ранних этапах жизненного цикла, что означает, что компонент / класс на поздних этапах компонент создается большое количество раз, что в конечном итоге приводит к зависанию навигатора.)

1 Ответ

0 голосов
/ 21 марта 2020

Я решил, поэтому, чтобы ответить на вопрос: Хук angular ngAfterViewInit является эквивалентом $ (document) .ready () .

Я не говорю, что это единственный способ , так как это может зависеть от того, что вы пытаетесь сделать (я новичок в Angular, поэтому не могу быть уверен).

Вот код. Это больше о способе создания дочернего компонента после того, как документ готов, чем о вызове метода, когда документ готов, поэтому большая часть этого выходит за рамки вопроса.

HTML

<div>
    <!-- Template that can contain multiple components of any kind. 
         I want it to contain a 'ComponentA' before the page is rendered. -->
    <template #containerForChildrenComponents></template>
</div>

TypeSript 

export class MainComponent implements AfterViewInit {

    @ViewChild('containerForChildrenComponents', {read: ViewContainerRef}) entry: ViewContainerRef;

    constructor(private readonly resolver: ComponentFactoryResolver,
                private readonly changeDetectorRef: ChangeDetectorRef) {
    }

    ngAfterViewInit(): void {
        // Call the method creating a child component of class 'ComponentA' inside the template
        this.createChildComponentA();
        this.changeDetectorRef.detectChanges();
    }

    createChildComponentA() {
        const factory = this.resolver.resolveComponentFactory(ComponentA);
        const componentRef = this.entry.createComponent(factory);
        // ...
    }
}
...