[英]When use a directive or reusable component on Angular 2 or Angular 4?
I have this following code: 我有以下代码:
<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>
I would like to re-use this code on another parts of my code. 我想在代码的其他部分重用此代码。 This code is a pop-over that shows a custom color picker.
此代码是一个弹出窗口,显示了自定义颜色选择器。 What do you recommend me to use?
您推荐我使用什么? I must to use a directive to re-use this code or i should use a component and call hem when i need?
我必须使用指令来重用此代码,否则我应该使用组件并在需要时调用下摆? What are the best practices?
最佳做法是什么?
Thanks a lot. 非常感谢。
One option is to use a component and you can do that this way: 一种选择是使用组件,您可以通过以下方式做到这一点:
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);
}
}
Then you can use it in another component with the following code and grab the colors through the setColor output. 然后,可以使用以下代码在另一个组件中使用它,并通过setColor输出获取颜色。
<popover (setColor)="onSetColor($event)"></popover>
Hope that helps. 希望能有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.