在Angular 2中重用組件

Question

當我開始使用Angular 2時，我認為創建組件的主要原因是因為您可以重用它們。 例如：

<custom-button id="button1">button 1</custom-button>
<custom-button id="button2">button 2</custom-button>

這是一個很大的理由，在網絡應用程序中使用角度2和組件，它可以做到嗎？

我還沒有找到專門回答我關於如何執行此操作的問題的資源。

我想創建一個按鈕和一個輸入，2個最基本和常用的html元素，並使它們可重用。

我試着制作一個按鈕組件並重復使用它。

我試圖在像這樣的html模板中使用它：

<custom-button>some text</custom-button>
<custom-button>different text</custom-button>

但是文本沒有顯示在按鈕上。 可以這樣做嗎？

我想知道的另一件事是做這個時的唯一html id。 我能為每個實例添加一個唯一的html id屬性嗎？

也許喜歡：

<custom-button id="display-bikes">bikes</custom-button>
<custom-button id="display-helmets">helmets</custom-button>

然后我可以使用元素的唯一ID來做一些特定的CSS？

這就是我想知道的，以及如何做到這一點。

但是，這是我的其余代碼涉及：

零件：

import { Component } from '@angular/core';
@Component({
    selector: 'custom-button',
    templateUrl: 'app/shared/button.component.html',
    styleUrls: ['app/shared/button.component.css']
})
export class ButtonComponent { }

CSS：

button {
  font: 200 14px 'Helvetica Neue' , Helvetica , Arial , sans-serif;
  border-radius: 6px;
  height: 60px;
  width: 280px;
  text-decoration: none;
  background-color: $accent;
  padding: 12px;
  color: #FFF;
  cursor: pointer;
}

button:focus {
    outline:0 !important;
}

HTML：

<button md-raised-button type="button" class="btn text-uppercase flex-sm-middle">
try now <!-----lets get rid of this and let the client decide what text to display somehow???
</button>

Answer 1

“這可以嗎？”

是! 這就是所謂的transclusion或內容投影 ，您可以在這里詳細了解它 。

這是如何做：

在button.component.html ：

<button>
    <ng-content></ng-content>
</button>

然后，無論何時將內容放入組件的標簽內，如下所示： <custom-button id="display-bikes">bikes</custom-button> ，Angular 2編譯器會將其“投影”到組件的模板中在ng-content標簽之間。 所以最終，你會在運行時得到它：

<button>
    bikes
</button>

這只是一個簡單的例子。 您可以獲得非常高級的功能，並執行項目其他組件和多個<ng-content>插座等操作。 在上面鏈接的博客上閱讀相關內容。

然后我可以使用元素的唯一ID來做一些特定的CSS？

此外，是的...雖然你不會使用標准的id屬性。

在ButtonComponent上：

import { Component, Input } from '@angular/core';
@Component({
  selector: 'custom-button',
  templateUrl: 'app/shared/button.component.html',
  styleUrls: ['app/shared/button.component.css']
})
export class ButtonComponent {
  @Input() styleId: string;

  //...
}

假設button.component.css有兩個名為class-one和class-two 。

在button.component.html中：

<button [ngClass]="{class-one: styleId === 'applyClassOne', class-two: styleId === 'applyClasstwo'}">
    <ng-content></ng-content>
</button>

然后綁定到父類中的Input屬性，如下所示：

<custom-button [styleId]="'applyClassOne'"></custom-button>
<custom-button [styleId]="'applyClassTwo'"></custom-button>

還有其他動態應用樣式的方法，但這個方法最簡單，因為只有兩個類可供選擇。

Answer 2

您可以使用@Input裝飾器來實現此@Input 。 你可以在這里閱讀更多相關信息。 首先，在ButtonComponent ，添加一個將顯示按鈕名稱的變量，如下所示：

export class ButtonComponent {

    @Input() buttonName: string;

}

注意 ：您需要導入Input裝飾器： import { Input } from '@angular/core';

然后，在html中使用雙向數據綁定（插值）來顯示按鈕值：

<button md-raised-button type="button" class="btn text-uppercase flex-sm-middle">
    {{buttonName}}
</button>

最后，當您想要顯示按鈕組件時，您可以為按鈕指定一個帶有簡單屬性值的名稱：

<custom-button buttonName="First Button"></custom-button>
<custom-button buttonName="Second Button"></custom-button>
<custom-button buttonName="Third Button"></custom-button>

我盡量保持這個簡單，如果遇到任何問題，請隨時提問。

Answer 3

你真的不應該費心去編寫依賴於組件ID的特定CSS，這不是必需的。

每個組件都被封裝（默認情況下）。 封裝使用Shadow DOM或仿真（默認）。 對於每個組件，您可以選擇以下3種封裝模式之一：

• ViewEncapsulation.None - 沒有樣式封裝
• ViewEncapsulation.Emulated - 默認值，使用屬性“封裝”樣式
• ViewEncapsulation.Native - 使用Shadow DOM

這是一篇關於這個主題的好博文： http ： //blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html