Как загрузить приложение Angular2 только тогда, когда DOM элемент присутствует

У меня есть этот код, который прекрасно работает, на мой файл main.ts (загрузочный файл для приложения):Как загрузить приложение Angular2 только тогда, когда DOM элемент присутствует

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { AppModule } from './app.module'; 

platformBrowserDynamic().bootstrapModule(AppModule);

Но я просто хочу, чтобы грузиться приложение, когда главный переключатель находится там (потому что если не он поднимает классическую ошибку селектор не найден), поэтому я думал, что-то вроде следующего кода будет работать:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { AppModule } from './app.module'; 

document.addEventListener('DOMContentLoaded', function() { 
    var shouldBootstrap = document.getElementById("my-app-selector"); 
    if (shouldBootstrap) { 
    platformBrowserDynamic().bootstrapModule(AppModule); 
    } 
});

к сожалению, это не работает , Я полагаю, что это связано с комбинацией javascript и машинописного текста. Есть ли способ прослушать событие, а также наличие элемента DOM, чтобы предотвратить загрузку angular2, когда это не необходимо?

Я бы пошел на этот подход, потому что я обслуживаю javascript в комплекте с webpack.

Спасибо!

источник

2016-11-12 Rubén_ic

Проверьте функцию загрузчика https://github.com/AngularClass/angular2-hmr/blob/master/src/helpers. ts – yurzui

Попробуйте console.log(document.getElementById("my-app-selector")) и посмотрите, что возвращается, когда селектор присутствует. Затем построить свой, если заявление о том, что вы могли бы или не могли бы ожидать:

if (document.getElementById("my-app-selector") !== undefined){ 
    platformBrowserDynamic().bootstrapModule(AppModule); 
}

Или (используйте let не var в машинописи)

let shouldBootstrap = document.getElementById("my-app-selector");

источник

2016-11-12 20:25:01

Большое спасибо! «пусть» сделал работу! –

вы используете WebPack, то просто добавьте ваш файл связки после селекторного тега ,

Ошибка селектора моя-приложение не найдено

<body> 
<script src="../dist/app.bundle.js"></script> 
<my-app>Loading...</my-app> 
</body>

Работа

<body> 
<my-app>Loading...</my-app> 
<script src="../dist/app.bundle.js"></script> 
</body>

источник

2016-11-12 20:35:33

Как загрузить приложение Angular2 только тогда, когда DOM элемент присутствует

ответ

Смежные вопросы