安裝和實現Angular 2組件

當我尋找一個插件來滿足我的角度2應用程序的需求時，我的選擇主要考慮的往往是「我真的可以解密如何安裝和使用它」。如果沒有，我會繼續下一個，希望能夠用更小的單詞和更大的例子。安裝和實現Angular 2組件

我想實現我的頁面上的撥動開關（不是「開/關」切換，但切換2 之間等價狀態：「顯示最近」和「顯示所有」）。

這是我正在看的一個。按照安裝說明： https://github.com/JulioWar/jw-bootstrap-switch-ng2

1]我使用的紗線安裝了

2]現在我導入CSS（同NPM，真的。）。（我不完全確定爲什麼，即使我已經安裝了它，我仍然需要添加一個鏈接到CDN，如果我只是連接到它，那麼安裝的意義何在？）

I' m很確定我可以繞過system.js.config.js的部分，因爲我們使用webpack。所以：

3]它說：然後可以使用該指令在模板：

@Component({ 
    selector: 'app', 
    template: ` 
    <bSwitch 
      [switch-base-class]="baseClass" 
      [switch-wrapper-class]="wrapperClass" 
      [switch-label-width]="labelWidth" 
      [switch-label-text]="labelText" 
      [switch-off-text]="offText" 
      [switch-on-text]="onText" 
      [switch-on-color]="color" 
      [switch-off-color]="offColor" 
      [switch-size]="size" 
      [switch-disabled]="disabled" 
      [switch-readonly]="readonly" 
      [switch-animate]="animate" 
      [(ngModel)]="state" 
      [switch-inverse]="inverse" 
      [switch-handle-width]="handleWidth" 
      [switch-base-class]="'bootstrap-switch'" 
      (onChangeState)="onChange($event)"> 
    </bSwitch> 
    ` 
}) 
export class AppComponent {}

我不知道我應該與此有關。我看到有些相似的代碼塊在我app.components.ts文件：

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.scss'] 
})

但我不知道這個新組件是否會被追加外內交錯現有@Component或它。

來源

2017-07-18 DaveC426913

我想查看關於Angular的[one-way in]（https://angular.io/guide/template-syntax#one-way-in）模板語法的文檔。它用於單向數據綁定，組件和指令可以用來利用動態傳遞[@Input]（https://angular.io/guide/attribute-directives#binding-to-anput-property）數據 –

對不起，我在那裏只看到一段，我不知道它與我的問題有何關係。 – DaveC426913

我是否在舊版本中添加新的@component，或者將它們貼在一起？ – DaveC426913

它告訴你page究竟該做什麼。添加JWBootstrapSwitchModule到你的模塊的進口清單：

imports: [BrowserModule, JWBootstrapSwitchModule],

一旦其導入到你的模塊，你可以使用它的任何組件模板中下段entited聲明包含上述導入模塊內。

<bSwitch [attributes]></bswitch>

來源

2017-07-18 21:56:27 LT56

啊。你的例子有助於澄清它比我想象的簡單得多。從字面上看，第3步僅僅是「在HTML **中放入 **」。這是@Component（{selector：'app'，template：'that throwrew me。 – DaveC426913

安裝和實現Angular 2組件

回答

相關問題