Question

这是stackblitz链接：- https://stackblitz.com/edit/angular-gtv8vo?file=src/app/app.component.html

在这里，单击按钮时未打开选色器？如何单击按钮打开彩色调色板？

<p-colorPicker [(ngModel)]="color"></p-colorPicker>
<button class="btn btn-primary">Add COlor</button>

Answer 1

使用ViewChild并调用它们onInputClick()。

在AppComponent中添加@ViewChild并导入ColorPicker组件。

import { Component, ViewChild } from '@angular/core';
import { ColorPicker} from 'primeng/colorpicker';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  @ViewChild('colorpicker') colorpicker: ColorPicker;
  name = 'Angular';
  color:any;

  clickButton(): void {
    this.colorpicker.onInputClick()
  }
}

模板：

<p-colorPicker #colorpicker [(ngModel)]="color"></p-colorPicker>
<button class="btn btn-primary" (click)="clickButton()">Add COlor</button>

Working example

Answer 2

简单方法：

<p-colorPicker #pcp [(ngModel)]="color"></p-colorPicker>
<button class="btn btn-primary" (click)="pcp.onInputClick()">Add Color</button>

如何使用按钮触发填色器？

2 个答案: