angular 5 为什么更改在 mat-menu 中不起作用

Question

为什么它在垫子菜单中不起作用（更改）。

这是我的代码

<mat-menu #texpublicity="matMenu">
  <button mat-menu-item [matMenuTriggerFor]="size">Tamaño de letra</button>
  <button mat-menu-item [matMenuTriggerFor]="type">Tipo de letra</button>
  <input type="color" (change)="changeColorLetters($event.target.value)" >
</mat-menu>

  changeColorLetters(color : string){
     this.colorLetters = color;
  }

这样就可以正常工作了

<mat-menu #texpublicity="matMenu">
  <button mat-menu-item [matMenuTriggerFor]="size">Tamaño de letra</button>
  <button mat-menu-item [matMenuTriggerFor]="type">Tipo de letra</button>
</mat-menu>

 <div>
    <input type="color" (change)="changeColorLetters($event.target.value)" >
 </div>


  changeColorLetters(color : string){
     this.colorLetters = color;
  }

输入在垫子菜单外有效，在垫子菜单内不起作用，有什么方法可以在垫子菜单内工作，还是我做错了什么？

Answer 1

为什么我们不能尝试使用 ElementRef。

<mat-menu #texpublicity="matMenu">
  <button mat-menu-item [matMenuTriggerFor]="size">Tamaño de letra</button>
  <button mat-menu-item [matMenuTriggerFor]="type">Tipo de letra</button>
  <input type="color" #colorElem>
</mat-menu>

组件

@ViewChild('colorElem') colorElem : ElementRef;

ngAfterViewInit() {
    this.colorElem.nativeElement.addEventListener('change', 
     (event)=>{
        // handle click here
     });
}