Перезагрузка DOMContent - PullRequest
Новая
       18

Перезагрузка DOMContent

0 голосов
/ 04 сентября 2018

Я понимаю, что angular - это одностраничное приложение с несколькими компонентами, использующее маршрут для взаимодействия между страницами.

У нас есть угловое приложение, подобное этому. Одним из требований является то, что в конкретном компоненте нам нужно добавить eventListener в событие DomContentLoaded.

Поскольку страница index.html была загружена (следовательно, событие DomContentLoaded было запущено) задолго до этого, у нас возникла проблема.

Я не могу найти способ повторно вызвать событие DomContentLoaded.

Ответы [ 4 ]

0 голосов
/ 04 сентября 2018

Событие DomContentLoaded наступило до того, как был создан первый компонент. Однако вы можете использовать метод ngAfterViewInit(). ngAfterViewInit() - это метод обратного вызова, который вызывается сразу после того, как Angular завершил инициализацию представления компонента. Он вызывается только один раз, когда создается экземпляр представления. 

class YourComponent {
    ngAfterViewInit() {
        // Your code here
    }
}

Если вам все равно нужно перехватить событие DomContentLoaded, сделайте это в файле main.ts.

0 голосов
/ 04 сентября 2018

Пожалуйста, не используйте таких слушателей, они (часто) не нужны в Angular. Попробуйте использовать крючки жизненного цикла компонентов .

В вашем случае я рекомендую использовать ngAfterViewChecked () , который запускает , когда компонент завершил рендеринг . 

import { Component, AfterViewChecked } from '@angular/core';

@Component({
  ...
})
export class WidgetLgFunnelsComponent implements AfterViewChecked {
  ngAfterViewChecked() {
    console.log('Component finished rendering!')
  }
}
0 голосов
/ 04 сентября 2018

Если вы хотите что-то сделать с элементами DOM внутри шаблона компонента и хотите убедиться, что они есть, вам следует использовать хук ngAfterViewInit от angular: 

@Component({
  // ...
})
export class SomeComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    // here you can be sure that the template is loaded, and the DOM elements are available
  }
}
0 голосов
/ 04 сентября 2018

Я не знаю точно, почему вам нужно слушать DomContentLoaded в angular, потому что там много функций, зависит от того, какую версию angular вы используете. 

export class SomeComponent implements AfterViewInit {
 ngAfterViewInit(): void {
 }

}

Но вы можете повторно запустить рендеринг компонента с помощью * ngIf (Angular2 +) или ng-if (AngularJS). Просто добавьте туда логическое значение и включите логическое значение для события.

...