CSS и JavaScript не применяются правильно после переноса содержимого HTML в компонент приложения Angular из-за проблем с инкапсуляцией просмотра и порядком загрузки скриптов
В настоящее время я переношу статический шаблон HTML в приложение Angular. Исходный шаблон отлично работает, если его поместить непосредственно в файл index.html проекта Angular. Однако когда я перемещаю содержимое тела этого шаблона в компонент Angular (app.comComponent.html), некоторые CSS и JavaScript применяются неправильно, что приводит к проблемам со стилем и функциональностью.
Проблема: Когда я заменяю тег <app.comComponent.html> фактическим содержимым HTML, все работает нормально. Но когда я использую компонент Angular для рендеринга этого контента, некоторые стили и функции JavaScript не работают должным образом.
Просьба о помощи:
Я ищу понимание того, почему это может происходить и как правильно перенести контент в компонент Angular, не теряя при этом стилей и функциональности JavaScript. Мы будем очень признательны за любые советы по устранению неполадок или передовым методам такого рода миграции.
Шаги, которые я предпринял:
Проверенная инкапсуляция представлений: я уже исследовал настройки инкапсуляции представлений Angular. Я попытался установить в своем компоненте инкапсуляцию ViewEncapsulation.None, но проблема не устранена.
Проверка стилей. Для проверки примененных стилей я использовал инструменты разработчика браузера. Кажется, что некоторые стили либо отсутствуют, либо переопределяются при перемещении контента в компонент Angular.
Порядок загрузки скриптов: я также проверил порядок загрузки скриптов. Все необходимые скрипты (jQuery, Bootstrap, пользовательские файлы JS) включены в index.html и загружаются правильно.
Есть ли у вас какие-либо сценарии, указанные в разделе «сценарии» вашего файла angular.json?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Раньше я также сталкивался с той же проблемой, что некоторые команды javascript, которые я использовал в компоненте Angular, применялись неправильно, и, естественно, я помещал эти коды в цикл Oninit, теперь почему он не применялся?
Потому что вообще сначала выполняются коды внутри ts файла, потом уже коды внутри html.
А когда для dom используется javascript, у нас все равно нет dom для доступа к нему, потому что сначала выполняются коды компонентов Angular, а затем html!!
Теперь это решение помогло мне поместить коды, связанные с доменом страницы, а это означает, что теги html должны быть полностью загружены, в цикл ngAfterViewInit.
И вот так решилась моя проблема
class MyComponent implements Oninit ,AfterViewInit {
ngOninit() {
//...
}
ngAfterViewInit() {
//...
}
}
надеюсь я помог
Добро пожаловать в Stack Overflow. К сожалению, в его нынешнем виде на этот вопрос невозможно ответить. Пожалуйста, сосредоточьтесь на конкретной проблеме. «Проблемы стиля и функциональности» не являются конкретной проблемой. Также добавьте минимальный воспроизводимый пример вашего кода, желательно в StackBlitz.