第一次设置，但不能正常工作

我已按照您的安装说明来信，包括正确设置我的角度模块文件。第一次设置，但不能正常工作

我已经削减，并从您的演示粘贴代码到我的app.component.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>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-tabset>

然而

，我得到这个当我运行了在本地主机的网站：

所以有些东西是不正确的设置。

我用angular-cli创建了一个全新的Angular应用程序。角的版本是4.0.0

感谢您的帮助

来源

2017-06-14 Dean Chalk

你使用的是什么版本的引导程序？ – HaveSpacesuit

“@ ng-bootstrap/ng-bootstrap”：“^ 1.0.0-alpha.26”， “bootstrap”：“^ 4.0.0-alpha.6”， –

这里是角度cli中的版本 @角/ CLI：1.1.1 节点：6.10.3 操作系统：win32的64 @角/动画：4.2.2 @角/共同：4.2.2 @角/编译器：4.2.2 @角/芯：4.2.2 @ angular/forms：4.2.2 @ angular/http：4.2.2 @ angular/platform-browser：4.2.2 @ angular/platform-browser-dynamic：4.2.2 @ angular /路由器：4.2.2 @ angular/cli：1.1.1 @ angular/c ompiler-cli：4.2.2 @ angular/language-service：4.2.2 –

NG-引导提供了可使用的指令，但不包括引导CSS进行样式。 getting started的说明提到，Bootstrap CSS需要依赖，并且它不是显式的，但暗示您必须在应用程序中包含Bootstrap CSS。这只是为了澄清指令的使用和使用CSS进行样式的区别。你不需要使用ng-bootstrap，如果你只是使用Bootstrap进行造型，格式化，布局等。

来源

2017-06-15 08:44:35

好的，所以你说的是ng-bootstrap是一个Angular4组件的集合，它支持现有的引导程序设置。这是有道理的。我已经通过npm安装了bootstrap软件包，因为我认为这些都是必要的，但我没有认识到需要将bootstrap独立集成到您的应用程序中。有道理 - 谢谢 –

我想澄清一下，这样其他人就不会感到困惑了，因为我想我会回想起当我新来的时候。当您通过NPM安装包时，它不会自动包含或“导入”您的应用程序。这可以通过import或require语句来完成，例如，取决于您的设置或构建过程。其次，如果您通过NPM安装Bootstrap，您不仅可以获得样式化的CSS，还可以获得基于jQuery的Bootstrap组件，而这些组件可能不希望包含在Angular应用程序中。 Bootstrap组件是ng-bootstrap替代的组件。 –

OK，我发现一个黑客得到它的工作，我已经添加了下面一行到我的角度应用程序的主css文件

@import '~bootstrap/dist/css/bootstrap.min.css';

这解决了问题，所以它似乎以某种方式ng-bootstrap包不能以某种方式连接css。反正每个人的

感谢帮助

来源

2017-06-15 06:01:03

J只是使用url（引导程序官方网站）：它的工作！

来源

2017-06-28 09:06:45 jasa

cdn我忘了，好吧！ – jasa

我也绊倒了这一点。

显然，NG-引导是引导带来当你在引导CSS带来哪些的JS的替代品，但它不清楚如何将在引导CSS 没有无用js，或者在没有关联css的情况下引入ng-bootstrap将不会产生预期的效果。

这里就是我没有...

在终端：
npm install [email protected] --save
带来引导4 CSS（可能是您阅读本文时更新）与相应的引导js和依赖上沿jquery，你只需要忽略它。

npm install @ng-bootstrap/ng-bootstrap --save
引入了使用bs4样式的角度组件。

在angular-cli.json （你正在使用角度cli不是吗？）：
"styles": [ "styles.css" ],
成为

"styles": [ "./../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css" ],
拥有的WebPack包括与您的自定义样式沿着引导样式。

然后按照getting started文档中所述添加进口。

来源

2017-09-26 15:12:24

第一次设置，但不能正常工作

回答

相关问题