Question

我有以下代码：

{{1}}

我想在代码的其他部分重用此代码。此代码是一个显示自定义颜色选择器的弹出窗口。你建议我用什么？我必须使用指令重新使用此代码，否则我应该使用组件并在需要时调用下摆？ 最佳做法是什么？

非常感谢。

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>

希望有所帮助。

在Angular 2或Angular 4上使用指令或可重用组件时？

1 个答案: