在 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>

我想在我的代码的其他部分重复使用此代码。此代码是显示自定义颜色选择器的弹出窗口。你推荐我用什么？我必须使用指令重新使用此代码，或者我应该使用组件并在需要时调用 hem？ 最佳做法是什么？

非常感谢。

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>

希望对您有所帮助。