Wenn eine Richtlinie oder eine wiederverwendbare Komponente auf Angular 2 oder Angular 4 verwendet wird?

Question

Ich habe diesen Code ein:

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

Ich mag würde diesen Code wiederverwenden auf andere Teile meines Codes. Dieser Code ist ein Pop-Over, der eine benutzerdefinierte Farbauswahl anzeigt. Was empfehlen Sie mir zu verwenden? Ich muss eine Direktive verwenden, um diesen Code wieder zu verwenden, oder ich sollte eine Komponente verwenden und Saum anrufen, wenn ich brauche? Was sind die besten Praktiken?

Vielen Dank.

Answer 1

Eine Möglichkeit ist, um eine Komponente zu verwenden, und Sie, dass diese Art und Weise tun:

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); 
    } 
} 

Dann können Sie es in einer anderen Komponente mit dem folgenden Code verwenden, und die Farben durch die setColor Ausgabe greifen.

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

Hoffe, dass hilft.