问题描述
我使用 Angular 11 Universal - 服务器端渲染.我正在尝试实现 Bootstrap 5 toast(css 运行良好),但它不理解类 new bootstrap:
I work with Angular 11 Universal - server side rendering. I'm trying to implement Bootstrap 5 toasts (css works well), but it doesn't understand class new bootstrap:
angular.json - 正确导入
angular.json - it's imported properly
"styles": [
"src/styles.scss",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/@popperjs/core/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
package.json
package.json
"@angular/platform-browser": "~11.2.7",
"@angular/platform-browser-dynamic": "~11.2.7",
"@angular/platform-server": "~11.2.7",
"@angular/router": "~11.2.7",
"@nguniversal/express-engine": "^11.2.1",
"@popperjs/core": "^2.9.2",
"bootstrap": "^5.0.0-beta3",
"express": "^4.15.2",
"popper.js": "^1.16.1",
我试图用最初的 JS 代码实现 toast:
I was trying to implement toasts with initial JS code:
import {
AfterViewInit,
Component,
ElementRef,
EventEmitter,
Inject,
Input,
OnInit,
Output,
PLATFORM_ID,
ViewChild
} from '@angular/core';
import { Toast } from '../../../../../node_modules/bootstrap/dist/js/bootstrap.min.js'
import {isPlatformBrowser} from "@angular/common";
@Component({
selector: 'app-toast',
templateUrl: './toast.component.html',
styleUrls: ['./toast.component.scss']
})
export class ToastComponent implements OnInit, AfterViewInit {
@Output() closeHit: EventEmitter<boolean> = new EventEmitter<boolean>();
// @Input() title: string = "Toast";
@Input() message: string = 'Enter message here';
@ViewChild('toast') toast: ElementRef<HTMLDivElement>
constructor(@Inject(PLATFORM_ID) private platformId: Object) {
if (isPlatformBrowser(this.platformId)) {
// var toastElList = [].slice.call(document.querySelectorAll('.toast'))
// var toastList = toastElList.map(function (toastEl) {
return new bootstrap.Toast(this.toast, {})
// })
new Toast(this.toast);
// Array.from(document.querySelectorAll('.toast'))
// .forEach(toastNode => new Toast(toastNode))
}
}
ngOnInit(): void {
}
ngAfterViewInit() {
}
}
但它不理解类引导程序 - 在新引导程序 TS2304 中:找不到名称引导程序".
But it don't understand class bootstrap - in new bootstrap TS2304: Cannot find name 'bootstrap'.
直接从 bootstrap.js 导入 toast 的 2 变体正在破坏应用程序新吐司(this.toast);
2 variant with importing toast directly from bootstrap.js is breaking the appnew Toast(this.toast);
ReferenceError: 文档未定义发生服务器错误.节点以 1 个代码退出.连接 ECONNREFUSED 127.0.0.1:62043npm 错误!代码生命周期npm 错误!错误号 1错误!client@0.0.0 dev:ssr: ng run client:serve-ssr
npm 错误!退出状态 1
ReferenceError: document is not definedA server error has occurred.node exited with 1 code.connect ECONNREFUSED 127.0.0.1:62043npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! client@0.0.0 dev:ssr: ng run client:serve-ssr
npm ERR! Exit status 1
请帮忙!有没有办法在 Angular Universal 中使用 Bootstrap 5 功能进行吐司、模态?
Please, help! Is there any way to use Bootstrap 5 functionality for toasts, modals in Angular Universal?
推荐答案
对我来说唯一正确的决定是拒绝在 Angular Universal 中使用 Bootstrap 并用 Angular Material SnackBar 和实用程序替换它.
Single right decision for me was to refuse from using Bootstrap in Angular Universal and replacing it with Angular Material SnackBar and utilities.
https://material.angular.io/components/snack-bar/examples
这行代码
this.toast = new Toast(this.toastEl.nativeElement,{});
- 调用新的 Toast - 对于我尝试以任何方式实现它的方式,它在 Universal Angular 中不起作用.
这篇关于Angular 11 Universal 和 Bootstrap 5 Toast 不工作 - 新引导程序 TS2304:找不到名称“引导程序",被压碎的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!