Жизненный цикл Angular: Как выполнить функцию javascript ПОСЛЕ инициализации Angular? - PullRequest
Новая
       6

Жизненный цикл Angular: Как выполнить функцию javascript ПОСЛЕ инициализации Angular?

0 голосов
/ 30 октября 2019

Я должен использовать эту стороннюю платформу и инициализировать ее после инициализации Angular.

Я пытался добавить ее в свой index.html: 

<body>
  ...
<script>
    document.addEventListener('DOMContentLoaded', () => {
        console.log('DKFDS Initialized', DKFDS);
        DKFDS.init();
    });
</script>
</body>

но это не работает.

Поэтому я попытался добавить его в ngOnInit () в app.component.ts: 

ngOnInit() {
    document.addEventListener('DOMContentLoaded', () => {
        console.log('DKFDS Initialized', DKFDS);
        DKFDS.init();
    });
}

все еще не повезло: - (

Единственный способ заставить его работать, это использовать jQuery для вызова функции init (): 

ngOnInit() {
  $(() => {
    console.log('DKFDS Initialized', DKFDS);
      DKFDS.init();
    });
}

РЕДАКТИРОВАТЬ: я также пытался ngAfterViewInit () с тем же разочаровывающим результатом ...

Итак, мой вопрос: как мне заставить это работать в чистом Angular-приложении без jQuery?

Я сделал стек, чтобы попытаться проиллюстрировать проблему. Появится всплывающее меню, нажав "Переполнение меню ": https://stackblitz.com/edit/angular-ubsvkt

Ответы [ 4 ]

0 голосов
/ 30 октября 2019

См. Пример updated stackblitz, теперь он работает,

Вы можете найти установленную зависимость dkfds, и теперь раскрывающееся меню работает так, как ожидается. Проблема была в том, что Angular не знает, что это была за библиотека. Здесь - это страница dkfds npm, которую вы можете установить в свой угловой проект с помощью npm install --save dkfds

0 голосов
/ 30 октября 2019

Вы можете показать / скрыть "overflow-menu-inner" div, переключая showOverflowMenu при нажатии кнопки.

Попробуйте так:

Рабочая демонстрация

<button (click)="showOverflowMenu = !showOverflowMenu"
  ...
</button>

    <div class="overflow-menu-inner" id="overflow1" *ngIf="showOverflowMenu">

        <ul class='overflow-list'>
            <li><button>Option 1</button></li>
            <li><button>Option 2</button></li>
            <li><a href='#'>Option 3 as link</a></li>
            <li><button>Option 4 is longer text</button></li>
        </ul>

    </div>
0 голосов
/ 30 октября 2019

В этом случае вы можете инициализировать стороннюю библиотеку внутри ngAfterViewChecked 

ngAfterViewChecked() { 
      DKFDS.init();
}

Для угловых крюков жизненного цикла см .: https://angular.io/guide/lifecycle-hooks

0 голосов
/ 30 октября 2019

Добавьте setTimeOut , чтобы он работал как шарм. Или используйте ngAfterViewInit () угловой крючок. 

ngOnInit() {
  setTimeOut(() => {
   document.addEventListener('DOMContentLoaded', () => {
      console.log('DKFDS Initialized', DKFDS);
      DKFDS.init();
    });
  });   
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...