在Angular 2或Angular 4上使用指令或可重用組件時？

Question

我有以下代碼：

<button class="btn form-control cayena-color-picker" btnCheckbox [popover]="myPopover" [ngClass]="selectedColor == null ? 'btn-default btn-fill' : selectedColor">
          </button>

          <popover-content #myPopover title="Selector de colores" [closeOnClickOutside]="true">
              <div class="color-palette blue1" (click)="setColor('blue1')" style="cursor:pointer"></div>
              <div class="color-palette blue2" (click)="setColor('blue2')" style="cursor:pointer"></div>
              <div class="color-palette blue3" (click)="setColor('blue3')" style="cursor:pointer"></div>
              <div class="color-palette yellow1" (click)="setColor('yellow1')" style="cursor:pointer"></div>
              <div class="color-palette yellow2" (click)="setColor('yellow2')" style="cursor:pointer"></div>
              <div class="color-palette yellow3" (click)="setColor('yellow3')" style="cursor:pointer"></div>
              <br>
              <div class="color-palette red1" (click)="setColor('red1')" style="cursor:pointer"></div>
              <div class="color-palette red2" (click)="setColor('red2')" style="cursor:pointer"></div>
              <div class="color-palette red3" (click)="setColor('red3')" style="cursor:pointer"></div>
              <div class="color-palette green1" (click)="setColor('green1')" style="cursor:pointer"></div>
              <div class="color-palette green2" (click)="setColor('green2')" style="cursor:pointer"></div>
              <div class="color-palette green3" (click)="setColor('green3')" style="cursor:pointer"></div>
              <br>
              <div class="color-palette gray1" (click)="setColor('gray1')" style="cursor:pointer"></div>
              <div class="color-palette gray2" (click)="setColor('gray2')" style="cursor:pointer"></div>
              <div class="color-palette gray3" (click)="setColor('gray3')" style="cursor:pointer"></div>
              <div class="color-palette violet1" (click)="setColor('violet1')" style="cursor:pointer"></div>
              <div class="color-palette violet2" (click)="setColor('violet2')" style="cursor:pointer"></div>
              <div class="color-palette violet3" (click)="setColor('violet3')" style="cursor:pointer"></div>              
          </popover-content>

我想在代碼的其他部分重用此代碼。 此代碼是一個彈出窗口，顯示了自定義顏色選擇器。 您推薦我使用什么？ 我必須使用指令來重用此代碼，否則我應該使用組件並在需要時調用下擺？ 最佳做法是什么？

非常感謝。

Answer 1

一種選擇是使用組件，您可以通過以下方式做到這一點：

import { Component } from '@angular/core';

@Component({
    selector: 'popover',
    template: `
      <popover-content #myPopover title="Selector de colores" [closeOnClickOutside]="true">
          <div class="color-palette blue1" (click)="onSetColor('blue1')" style="cursor:pointer"></div>
          ...
          <div class="color-palette violet3" (click)="onSetColor('violet3')" style="cursor:pointer"></div>              
      </popover-content>
    `
})
export class PopoverComponent {
  @Output() setcolor: EventEmitter<string> = new EventEmitter<string>();

  constructor() { }

  onSetColor(color: string) {
    this.setColor.emit(color);
  }
}

然后，可以使用以下代碼在另一個組件中使用它，並通過setColor輸出獲取顏色。

<popover (setColor)="onSetColor($event)"></popover>

希望能有所幫助。