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

我已按照您的安裝說明來信，包括正確設置我的角度模塊文件。第一次設置，但不能正常工作

我已經削減，並從您的演示粘貼代碼到我的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

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

回答

相關問題