Bootstrap 4 разрывает выпадающий список при импорте начальной загрузки в Angular 7 - PullRequest
Новая
       11

Bootstrap 4 разрывает выпадающий список при импорте начальной загрузки в Angular 7

0 голосов
/ 28 января 2019

У меня проблема в приложении Angular 7.Я не смог воспроизвести его с помощью чистого Bootstrap CSS / JS и Popper.js.

Я пытаюсь использовать ванильный Bootstrap JS и jQuery, потому что мне нужны тосты Bootstrap и другие библиотеки.(ng-bootstrap и ngx-bootstrap) на данный момент не поддерживают тосты.

Минимальный (не) рабочий пример

https://github.com/Crocmagnon/angular-bootstrap4-dropdown-issue

Запустите его с npm run start

Ссылка на проблему в репозитории Popper.js

Я пытался спросить разработчика, но он не знает: https://github.com/FezVrasta/popper.js/issues/748

Действия по воспроизведению проблемы

Воспроизвести на примере: 

npm i -g @angular/cli
git clone https://github.com/Crocmagnon/angular-bootstrap4-dropdown-issue.git
cd angular-bootstrap4-dropdown-issue
npm i
ng serve

Воспроизвести с нуля:

  1. Создать угловое приложение с помощью ng-cli
  2. Установить типы начальной загрузки и начальной загрузки:
    • npm install --save bootstrap @types/bootstrap.
    • @types/bootstrap требует popper.js в качестве зависимости.
  3. Включить Bootstrap 4 CSS и JS-файлы
  4. Включить Popper JS UMD-файл
  5. Добавьте import 'bootstrap'; где-нибудь, чтобы сообщить машинописи, что функция jQuery .tooltip() существует
  6. Попробуйте использовать раскрывающийся список Bootstrap 4 в navbar

Соответствующий отрывокот angular.json: 

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "node_modules/@fortawesome/fontawesome-free/css/all.css",
  "src/styles.scss"
],
"scripts": [
  "node_modules/jquery/dist/jquery.slim.js",
  "node_modules/popper.js/dist/umd/popper.js",
  "node_modules/bootstrap/js/dist/util.js",
  "node_modules/bootstrap/js/dist/alert.js",
  "node_modules/bootstrap/js/dist/button.js",
  "node_modules/bootstrap/js/dist/carousel.js",
  "node_modules/bootstrap/js/dist/collapse.js",
  "node_modules/bootstrap/js/dist/dropdown.js",
  "node_modules/bootstrap/js/dist/modal.js",
  "node_modules/bootstrap/js/dist/scrollspy.js",
  "node_modules/bootstrap/js/dist/tab.js",
  "node_modules/bootstrap/js/dist/toast.js",
  "node_modules/bootstrap/js/dist/tooltip.js",
  "node_modules/bootstrap/js/dist/popover.js"
]

Какое поведение ожидается?

Выпадающее меню должно переключаться

Что пошло не так?

Выпадающее окно не 't toggle to

Комментарии

Я попытался включить файлы Popper ESM в мой angular.json файл.Теперь все работает нормально, за исключением того, что я получаю сообщение об ошибке в консоли. 

Uncaught SyntaxError: Unexpected token export

Я что-то здесь пропускаю?

Edit

Кажется, что это утверждение в main.ts ломает выпадающий список: 

import 'bootstrap';

Однако, если я удаляю его, Typescript выкрикивает, когда я хочу сделать Bootstrap jQuery, например отображение тостов или всплывающих подсказок: 

$(() => {
  $('[data-toggle="tooltip"]').tooltip();
});

Ответы [ 2 ]

0 голосов
/ 29 января 2019

Проблема, с которой вы столкнулись, связана с компилятором машинописи.Чтобы обойти это, вы можете инициализировать всплывающие подсказки и другие элементы в базовом файле JS.Вам нужно будет импортировать этот файл, поэтому создайте его либо в папке ресурсов (и свяжите его в вашем index.html), либо в другом месте и упомяните его в части scripts вашего angular.json.

Чтобы инициализировать всплывающие подсказки, содержимое этого файла JS будет: 

$(() => {
  $('[data-toggle="tooltip"]').tooltip();
});

Это инициализирует все всплывающие подсказки, когда документ будет готов.

Если вы хотите сделать это в определенный момент в угловом потоке, оберните вызов в функцию следующим образом: 

function tooltip() {
  $(() => {
    $('[data-toggle="tooltip"]').tooltip()
  })
}

Чтобы вызвать его в файле Typescript, вынужно сначала объявить функцию.Например, чтобы инициализировать всплывающие подсказки в ngOnInit(): 

declare function tooltip();
ngOnInit() {
  tooltip();
}

Таким образом, вам не нужно никуда вставлять import 'bootstrap';, чтобы не сломать другие компоненты.

0 голосов
/ 28 января 2019

Я использую последнюю версию angular-cli.

Прежде всего, загрузите мой проект github по этой ссылке и в cmd запустите npm install (так что вся зависимостьдобавлен в вашу систему), и после запуска ng-serve, вы перейдете к http://localhost:4200/.

, если вы сделали это, ваша проблема будет решена.

, если вы хотите использовать jquery-syntex вваш проект.

введите эти команды в cmd

npm install jquery --save 
npm install @types/jquery --save

и добавьте этот синтаксис в ваш app.component.ts 

import $ from 'jquery';

2-й вопрос

используйте ngx-bootstrap, если вы хотите использовать tooltip на своем устройстве.

Спасибо !!

...