Как использовать компоненты Bootstrap в приложении Angular без стороннего модуля?
Я пытаюсь включить Подсказки Bootstrap 5.3 в своем приложении Angular 17.
В angular.json я включил bootstrap.bundle.min.js, в который встроен PopperJS.
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]
Я использую пример кода, предоставленный Bootstrap в официальной документации, для включения всплывающих подсказок: https://getbootstrap.com/docs/5.3/comComponents/tooltips/#enable-tooltips
Их код выдает ошибку в строке 16 моего app.component.ts файла...
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
title = 'identity-verification-ui';
onInit() {
const tooltipTriggerList = document.querySelectorAll(
'[data-bs-toggle = "tooltip"]'
);
const tooltipList = [...tooltipTriggerList].map(
(tooltipTriggerEl) => new bootstrap.Tooltip(tooltipTriggerEl) // <-- line 16
);
}
}
Ошибка Cannot find name 'bootstrap'. ts (2304). Очевидно, что класс bootstrap недоступен из app.component.ts.
Как сделать new bootstrap доступным в app.component.ts? Разве app.component.ts не подходящее место для включения компонентов Bootstrap во всем приложении? Есть ли более предпочтительный способ сделать это?
Я хочу избежать загрузки jQuery.
Я хочу избежать использования стороннего модуля npm.
Ответы 1
Обновление благодаря Киркланду, который помнит меня: «Не используйте ничего, если можете этого избежать». Я меняю объявление как HTMLElement вместо любого
если установишь @types/bootstrap
npm i @types/bootstrap
Просто импортируйте только всплывающую подсказку в свой компонент.
import { Tooltip } from 'bootstrap';
И в ngOnInit
ngOnInit() {
const tooltips:HTMLElement[]=[].slice.call(
document.querySelectorAll('[data-bs-toggle = "tooltip"]'))
tooltips.map((x:HTMLElement)=>new Tooltip(x))
}
Update2 с использованием директивы с селектором, например [data-bs-toggle = "tooltip"], делает каждый элемент с этим атрибутом «супер»-элементом. Итак, мы можем создать:
import { Directive, ElementRef } from '@angular/core';
import { Tooltip } from 'bootstrap';
@Directive({
selector: '[data-bs-toggle = "tooltip"]',
standalone: true
})
export class TooltipDirective {
constructor(elementRef: ElementRef) {
new Tooltip(elementRef.nativeElement);
}
}
Каждый автономный компонент, который импортирует эту директиву, обеспечивает работу всплывающей подсказки.
Чтобы включить его для всего приложения, удалите standalone: true и импортируйте в @NgModule...
import { TooltipDirective } from './path/to/tooltip.directive';
@NgModule({
...
declarations: [
...
TooltipDirective,
...
],
...
});
Это сработало для меня. Для всех, кто попробует это и столкнется с any в методе ngOnInit(), заблокированном правилами Typescript в их проекте, замените any на HTMLElement.
@Киркланд, спасибо за совет :)
Это решение ограничено компонентом, имеющим всплывающую подсказку. Есть ли способ сделать это глобально, чтобы мне не приходилось повторять код в нескольких компонентах?
@Kirkland, вы можете использовать директиву, чтобы придать вашим атрибутам «суперсилу». Я обновляю ответ и обновляю stackblitz, используя директиву.
Я понимаю ваше беспокойство, но есть веская причина, по которой не рекомендуется загружать весь загрузочный CSS и JavaScript в основной пакет. Вы требуете, чтобы посетитель загрузил все jquery, popperjs, bootstrap js/css для компонентов, которые еще даже не видны на целевой странице. Именно поэтому существуют такие библиотеки, как эта. Если вы не хотите использовать библиотеку, вы все равно можете использовать код внутри своего проекта напрямую.