- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
{
"name": "ModalWindow",
"version": "1.0.0",
"repository": {
"type": "git",
"url": ""
},
"scripts": {
"build": "webpack --mode production",
"start": "webpack-dev-server --mode development --open"
},
"license": "MIT",
"dependencies": {
"@angular/common": "^5.0.0",
"@angular/compiler": "^5.0.0",
"@angular/core": "^5.0.0",
"@angular/forms": "^5.0.0",
"@angular/platform-browser": "^5.0.0",
"@angular/platform-browser-dynamic": "^5.0.0",
"@angular/router": "^5.0.0",
"core-js": "^2.5.5",
"rxjs": "6.3.0",
"rxjs-compat": "^6.3.3",
"sass": "^1.15.0",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@ng-bootstrap/ng-bootstrap": "^1.1.1",
"@types/node": "^10.0.4",
"angular2-template-loader": "^0.6.2",
"css-loader": "^0.28.11",
"html-webpack-plugin": "^3.2.0",
"less": "^3.0.4",
"less-loader": "^4.1.0",
"node-sass": "^4.10.0",
"raw-loader": "^0.5.1",
"sass-loader": "^7.1.0",
"style-loader": "^0.21.0",
"ts-loader": "^4.3.0",
"typescript": "^2.8.3",
"webpack": "4.8.1",
"webpack-cli": "^2.1.3",
"webpack-dev-server": "3.1.4"
}
}
这是我的 package.json,我不明白哪里出了问题,但 ng-bootstrap 中的标签集无法正常工作。
最佳答案
最新版本 4.0.0 和您在 package.json 中使用的版本(即 ^1.1.1)之间的主要区别在于,在最新版本中没有必要导入NgbModule
作为NgbModule.forRoot()
.例如-
@NgModule({
imports: [BrowserModule, FormsModule, ReactiveFormsModule, HttpClientModule, NgbModule],
declarations: [....],
bootstrap: [...]
})
但是如果你导入NgbModule
如上所示,在您使用的 1.1.1 版本中,您将得到以下错误
ERROR Error: StaticInjectorError(AppModule)[NgbTabset -> NgbTabsetConfig]: StaticInjectorError(Platform: core)[NgbTabset -> NgbTabsetConfig]: NullInjectorError: No provider for NgbTabsetConfig!
那是因为低版本需要用.forRoot()
在您的根模块中,以使其在您应用程序的所有其他模块和组件中可用。
因此对于您使用的版本 1.1.1,您需要在根模块中使用以下代码 app.module.ts
@NgModule({
imports: [BrowserModule, FormsModule, ReactiveFormsModule, HttpClientModule, NgbModule.forRoot()],
declarations: [AppComponent, NgbdTabsetBasic],
bootstrap: [AppComponent]
})
这是 Angular 5 和您正在使用的 ng-bootstrap 版本 1.1.1 的完整示例 -
package.json(和你用的一样)
{
"name": "ModalWindow",
"version": "1.0.0",
"repository": {
"type": "git",
"url": ""
},
"scripts": {
"build": "webpack --mode production",
"start": "webpack-dev-server --mode development --open"
},
"license": "MIT",
"dependencies": {
"@angular/common": "^5.0.0",
"@angular/compiler": "^5.0.0",
"@angular/core": "^5.0.0",
"@angular/forms": "^5.0.0",
"@angular/platform-browser": "^5.0.0",
"@angular/platform-browser-dynamic": "^5.0.0",
"@angular/router": "^5.0.0",
"@ng-bootstrap/ng-bootstrap": "1.1.1",
"core-js": "^2.5.5",
"rxjs": "6.3.0",
"rxjs-compat": "^6.3.3",
"sass": "^1.15.0",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@types/node": "^10.0.4",
"angular2-template-loader": "^0.6.2",
"css-loader": "^0.28.11",
"html-webpack-plugin": "^3.2.0",
"less": "^3.0.4",
"less-loader": "^4.1.0",
"node-sass": "^4.10.0",
"raw-loader": "^0.5.1",
"sass-loader": "^7.1.0",
"style-loader": "^0.21.0",
"ts-loader": "^4.3.0",
"typescript": "^2.8.3",
"webpack": "4.8.1",
"webpack-cli": "^2.1.3",
"webpack-dev-server": "3.1.4"
}
}
app.component.html
<div class="container-fluid">
<ngbd-tabset-basic></ngbd-tabset-basic>
</div>
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html'
})
export class AppComponent {
}
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppComponent } from './app.component';
import { NgbdTabsetBasic } from './tabset-basic';
@NgModule({
imports: [BrowserModule, FormsModule, ReactiveFormsModule, HttpClientModule, NgbModule.forRoot()],
declarations: [AppComponent, NgbdTabsetBasic],
bootstrap: [AppComponent]
})
export class AppModule {}
tabset-basic.html
<ngb-tabset>
<ngb-tab title="Simple">
<ng-template ngbTabContent>
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth
master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh
dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum
iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
</ng-template>
</ngb-tab>
<ngb-tab>
<ng-template ngbTabTitle><b>Fancy</b> title</ng-template>
<ng-template ngbTabContent>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.
<p>Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table
craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl
cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia
yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean
shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero
sint qui sapiente accusamus tattooed echo park.</p>
</ng-template>
</ngb-tab>
<ngb-tab title="Disabled" [disabled]="true">
<ng-template ngbTabContent>
<p>Sed commodo, leo at suscipit dictum, quam est porttitor sapien, eget sodales nibh elit id diam. Nulla facilisi. Donec egestas ligula vitae odio interdum aliquet. Duis lectus turpis, luctus eget tincidunt eu, congue et odio. Duis pharetra et nisl at faucibus. Quisque luctus pulvinar arcu, et molestie lectus ultrices et. Sed diam urna, egestas ut ipsum vel, volutpat volutpat neque. Praesent fringilla tortor arcu. Vivamus faucibus nisl enim, nec tristique ipsum euismod facilisis. Morbi ut bibendum est, eu tincidunt odio. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquet odio ac lorem aliquet ultricies in eget neque. Phasellus nec tortor vel tellus pulvinar feugiat.</p>
</ng-template>
</ngb-tab>
</ngb-tabset>
tabset-basic.ts
import {Component} from '@angular/core';
@Component({
selector: 'ngbd-tabset-basic',
templateUrl: './tabset-basic.html'
})
export class NgbdTabsetBasic { }
我们需要添加 Bootstrap 4.0 css 作为依赖。可以通过以下两种方式添加 css - 1.添加一个<link>
在 index.html
中使用样式表标记页 2. 如果您使用的是 angular-cli,则可以将其添加到 styles
中节.angular-cli.json
像
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
]
这是一个完整的工作演示 https://stackblitz.com/edit/angular-wfkcak
更新:通过您的 stackblitz 链接后,我发现您忘记添加 bootstrap 4 CSS 文件。我已将其添加到 index.html
中文件。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
您也可以将其添加到 angular.json
(对于 Angular 6 )或 .angular-cli.json
(对于 Angular 5 )在 styles
下适用于您上面提到的数组。
这是更新的 stackblitz https://stackblitz.com/edit/angular-gmedf1
关于Angular ng-bootstrap tabset 字段不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53339926/
在angular 6项目中,我使用angular cli命令ng g lierary @some/libName创建了 Angular 库。在我的库中,我有一个需要@ng-bootstrap/ng-b
我在 plunker 有一个简单的例子.我在一个元素上有一个 ng-show,另一个元素有一个选择。选择应该切换显示/隐藏其他(输入)元素。最初将 select 设置为 Yes 会按预期显示其他输入元
我需要一个由其定义的属性(受监控)过滤的数据列表,我不能这样做: ng-if="project.monitored" 因为我需要计算不受监控的数量。 对于这个例子,我简化了从 getProjects(
我知道 ng-show 和 ng-hide 影响元素上设置的类,而 ng-if 控制元素是否呈现为 DOM 的一部分 是否有选择 ng-if 而不是 ng-show/ng-hide 或反之亦然的示例?
我试图理解 ng-if 和 ng-show/ng-hide 之间的区别,但它们看起来相同对我来说。 选择使用其中之一时我应该记住什么区别吗? 最佳答案 ngIf ngIf 指令根据表达式删除或重新创建
我有一个基本问题,通过查看 Angular 文档或 Google 找不到答案,因此我假设这是不可能的,但我想确定一下。 基本上我想要的是使用一个变量,例如$scope.loggedIn,如下所示: H
据我了解ng-show和ng-hide影响元素上设置的类,并且 ng-if控制元素是否呈现为 DOM 的一部分。 是否有选择 ng-if 的指南超过ng-show/ng-hide或者反之亦然? 最佳答
我的 html 中有几个 div。我正在将内容导出为 PDF,当用户单击导出按钮时会下载 PDF。我希望少数 div 的内容不导出/显示在 PDF 中,但应显示在网页上。我已将 ng-if="!isE
我有一个标记按钮,当用户点击它时,标记讨论,然后标记按钮被替换为文本“成功标记”。目前,我在单击标记按钮后无法禁用 ng-click 时遇到了问题。 ng-click 对于文本“已成功标记”仍然存在,
我在 Angular 1.4.7 中有这段代码: console.log('press') 不会在按下任何键时触发。我也尝试使用 keyup 和 keydown,但它们也不起作用。 我知道一个元素需
正如标题中提到的,我不知道如何使用 ng-bind-html 在部分内部呈现 html。 这里有一个 plunker 来说明。 http://plnkr.co/edit/YFfHsahcum7XA8G
将 ng-bootstrap 安装到我的 Angular-CLI(11.0.4) 时出现错误。 什么时候 ng add @ng-bootstrap/ng-bootstrap 还有我的日志文件 [err
我想从另一个 ng-controller 访问 ng-model,这可能吗?如何实现?在下面的代码中,我使用两个 Controller ,第一个 Controller 具有 mddl1,另一个 Con
在我的应用程序中,当我对文章进行 ng-repeat 时,用户单击“我想隐藏并显示一些元素”。为此,我使用的是 videoPlaying[$index],它对于所有具有 ng-hide 的元素都可以正
预信息 我尝试将管理员和客户分开在不同的阶段或 View 中。 这样,管理员可以在将表发布给客户之前对其进行修改。 问题在表格 -> td 中有按钮来控制暂存、释放(显示)或恢复(隐藏)? 所以基本上
这个问题在这里已经有了答案: What are the nuances of scope prototypal / prototypical inheritance in AngularJS? (3
我有以下奇怪的情况 - Controller 片段 - $scope.filterNum = {0: 'filterVal1', 1: 'filterVal2', 2: 'filterVal3', 3
AngularJS 版本:1.3.8 JSFiddle: http://jsfiddle.net/uYFE9/4/ 我一直在开发一个小的 AngularJS 应用程序,遇到了一些问题。我在页面上有一个
我有一个范围对象,其中包含具有 3 个不同图像的对象。我在 div 内显示图像,该图像重复直到范围对象的长度。我有 3 个不同的 img 标签,它们具有 ng-if 属性,并且仅一次显示 3 个图像之
在 AngularJs 中没有提供 ng-enabled 指令。是否有任何适当的理由不在框架中提供该指令,因为当您可以使用 ng- 时,我们同时拥有 ng-show 和 ng-hide隐藏来实现我们的
我是一名优秀的程序员,十分优秀!