web-dev-qa-db-ja.com

Angular 2でのコンポーネントの再利用

Angular 2を使い始めたとき、コンポーネントを作成する主な理由は、コンポーネントを再利用できるからだと思いました。例：

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

これがangular 2とWebアプリのコンポーネントを使用する大きな理由であり、それを実行できるのは事実ですか？

これを行う方法についての私の質問に具体的に答えるリソースが見つかりません。

ボタンと入力、最も基本的で一般的に使用される2つのhtml要素を作成し、それらを再利用できるようにしたいと思います。

ボタンコンポーネントを作って再利用してみました。

私はそれを次のようなhtmlテンプレートで使用しようとしました：

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

ただし、テキストはボタンに表示されませんでした。これはできますか？

私が疑問に思っているもう1つのことは、これを行うときの一意のhtmlIDです。各インスタンスに一意のhtmlid属性を追加できますか？

多分次のように：

<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>
angularcomponentsreusability
6
BeniaminoBaggins

これは、@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>

私はこれをできるだけ単純に保つように努めました、何か問題が発生した場合は遠慮なく質問してください。

7
Stefan Svrkota

「これはできますか？」

はい！それはトランスクルージョンまたはコンテンツプロジェクションと呼ばれ、あなたは 読む詳細はこちら 。

方法は次のとおりです。

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という名前の2つのクラスがあるとします。

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>

スタイルを動的に適用する方法は他にもありますが、選択できるクラスが2つしかないため、これが最も簡単です。

15
ABabin

コンポーネントのIDに依存する特定のCSSをわざわざ書く必要はありません。これは必要ありません。

各コンポーネントはカプセル化されています（デフォルト）。カプセル化では、Shadow DOMまたはエミュレーション（デフォルト）を使用します。コンポーネントごとに、次の3つのカプセル化モードのいずれかを選択できます。

  • ViewEncapsulation.None-スタイルのカプセル化なし
  • ViewEncapsulation.Emulated-デフォルトで、属性を使用してスタイルを「カプセル化」します
  • ViewEncapsulation.Native-ShadowDOMを使用します

このトピックに関する優れたブログ投稿は次のとおりです。 http://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html

2
KnightB4