[英]Angular CLI - angular 5.2.0 with ng-boostrap is not working
我正在尝试使用角度cli设置角度应用程序,并且有一个专门用于角度应用程序的新ng-boostrap模块
ng new angular-cli-bootstrap-test
cd angular-cli-bootstrap-test
npm install --save @ng-bootstrap/ng-bootstrap
ng serve
并为ng-boostrap, app.module.ts添加了一些配置:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
NgbModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts :
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
model = {
left: true,
middle: false,
right: false
};
}
app.component.html :
<div class="btn-group btn-group-toggle">
<label class="btn-primary" ngbButtonLabel>
<input type="checkbox" ngbButton [(ngModel)]="model.left"> Left (pre-checked)
</label>
<label class="btn-primary" ngbButtonLabel>
<input type="checkbox" ngbButton [(ngModel)]="model.middle"> Middle
</label>
<label class="btn-primary" ngbButtonLabel>
<input type="checkbox" ngbButton [(ngModel)]="model.right"> Right
</label>
</div>
<hr>
<pre>{{model | json}}</pre>
抱歉,如果我错过了某些东西,那么所有内容都将正确显示,而且没有引导样式,也许我缺少了什么?
页面源表单浏览器:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AngularCliBootstrapTest</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body>
</html>
添加CSS解决了我的问题,这在ng-boostrap手册中未定义
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AngularCliBootstrapTest</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<app-root></app-root>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.