如何在 Angular 9 应用程序上设置 angular-bootstrap-toggle?
How do you setup angular-bootstrap-toggle on an Angular 9 app?
我正在学习 Angular 9 并完成了英雄之旅应用程序和教程。我使用本教程作为基础来添加新功能,例如对远程资源的 CRUD 操作,并且我已将 @ng-bootstrap/ng-bootstrap 添加到项目中,但我无法获得 angular-bootstrap-切换 工作。
Bootstrap Toggle上的说明与我目前所学的不符,我找不到任何解决方案。
例如,我不知道这个命令angular.module('myApp', ['ui.toggle']);
如何配合Angular9和我使用的教程
如何让系统在单击切换时调用 onChange()
?
angular.json
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/bootstrap4-toggle/css/bootstrap4-toggle.min.css",
"src/styles.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.bundle.js",
"node_modules/bootstrap4-toggle/js/bootstrap4-toggle.min.js"
]
navigation-bar.component.html
这会正确显示并按预期切换
<input id="local-browse" (change)="onChange()" type="checkbox" checked="" data-toggle="toggle" data-on="Local" data-off="Remote" data-onstyle="success" data-offstyle="danger" data-size="sm">
navigation-bar.component.ts
如果我输入标准 checkbox
,onChange()
会按预期工作,但 angular-bootstrap-toggle
import { Component, OnInit } from '@angular/core';
declare var $: any;
@Component({
selector: 'app-navigation-bar',
templateUrl: './navigation-bar.component.html',
styleUrls: ['./navigation-bar.component.css'],
})
export class NavigationBarComponent implements OnInit {
localUrl = 'http://192.168.253.53';
remoteUrl = 'https://remoteaddress.com';
local = true;
constructor() {}
ngOnInit(): void {
$(document).ready(() => {
console.log('The document ready for jQuery!');
});
}
onChange() {
if (this.local === true) {
this.local = false;
} else {
this.local = true;
}
}
}
我认为它不兼容 Angular 2+(或至少 angular 9)。
您可能喜欢使用来自 https://www.npmjs.com/package/@nth-cloud/ng-toggle 的 ng-toggle
这是在 Angular 9 上测试的。
https://nth-cloud.github.io/ng-toggle/#/home
中有关安装的更多信息
我正在学习 Angular 9 并完成了英雄之旅应用程序和教程。我使用本教程作为基础来添加新功能,例如对远程资源的 CRUD 操作,并且我已将 @ng-bootstrap/ng-bootstrap 添加到项目中,但我无法获得 angular-bootstrap-切换 工作。
Bootstrap Toggle上的说明与我目前所学的不符,我找不到任何解决方案。
例如,我不知道这个命令angular.module('myApp', ['ui.toggle']);
如何配合Angular9和我使用的教程
如何让系统在单击切换时调用 onChange()
?
angular.json
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/bootstrap4-toggle/css/bootstrap4-toggle.min.css",
"src/styles.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.bundle.js",
"node_modules/bootstrap4-toggle/js/bootstrap4-toggle.min.js"
]
navigation-bar.component.html
这会正确显示并按预期切换
<input id="local-browse" (change)="onChange()" type="checkbox" checked="" data-toggle="toggle" data-on="Local" data-off="Remote" data-onstyle="success" data-offstyle="danger" data-size="sm">
navigation-bar.component.ts
如果我输入标准 checkbox
,onChange()
会按预期工作,但 angular-bootstrap-toggle
import { Component, OnInit } from '@angular/core';
declare var $: any;
@Component({
selector: 'app-navigation-bar',
templateUrl: './navigation-bar.component.html',
styleUrls: ['./navigation-bar.component.css'],
})
export class NavigationBarComponent implements OnInit {
localUrl = 'http://192.168.253.53';
remoteUrl = 'https://remoteaddress.com';
local = true;
constructor() {}
ngOnInit(): void {
$(document).ready(() => {
console.log('The document ready for jQuery!');
});
}
onChange() {
if (this.local === true) {
this.local = false;
} else {
this.local = true;
}
}
}
我认为它不兼容 Angular 2+(或至少 angular 9)。 您可能喜欢使用来自 https://www.npmjs.com/package/@nth-cloud/ng-toggle 的 ng-toggle 这是在 Angular 9 上测试的。 https://nth-cloud.github.io/ng-toggle/#/home
中有关安装的更多信息