如何使用输入的Angular模板引用变量来绑定具有相同格式的特定按钮

Question

现在，我试图通过以下 露丝先生的例子。但是，我的 Web 应用程序中的按钮行具有与此相同的格式： topnav.component.html：

<button
  mat-button
  *ngFor="let item of toolNavItems"
  (click)='onTopNavClick(item)'
  [class.active]="item.selected"
  [title]="item.title"
>
  <mat-icon [class]="item.icon">{{item.icon}}</mat-icon>
  
</button>

topnav.component.ts：

export class TopnavComponent implements OnInit {

    @Output() topnavSelect: EventEmitter<ToolNavItem> = new EventEmitter();
    toolNavItems: ToolNavItem[];

    constructor(
        private sketchService: SketchService,
    ) { }

    ngOnInit(): void {
        this.sketchService.menusObs.pipe(untilDestroyed(this)).subscribe(menus => {
            this.toolNavItems = menus;
        });
    }

    onTopNavClick(selectedTopnavItem: ToolNavItem) {
        this.topnavSelect.emit(this.sketchService.selectMenu(selectedTopnavItem));
    }

}

用于打开图像进行显示的隐藏输入将类似于以下内容：

<input #inputFile class="ng-hide" style="display:none;" name="file" multiple type="file" accept=".jpg, .png, .jpeg, .JPG, .PNG, .JPEG" (change)="getFiles($event)"/>

How can I bind the input to the value of item or item.title which is the将按钮行与所选按钮分开的唯一方法？

这是 sketchService 类中按钮的项目值，我想将按钮的 onclick 事件绑定到 Angular 模板引用变量 [(click)="inputFile.click()"] 的 click() 函数：

{
    id: 'upload_image',
    title: 'Upload Image for Blending',
    icon: 'image',
    type: 'passive'
  }

请告诉我如何操作这样做。最初，我考虑使用 *ngIf 来检测 item.id 的值，作为根据以下伪代码为按钮的 onclick 事件分配适当函数的方法：

*ngIf item.id is 'upload_image'
   (click)="inputFile.click()"
else 
   (click)="onTopNavClick(item)"

但是，文章 *ngIf 和 *ngFor 在同一元素上导致错误迫使我三思而后行。你说过使用 HTML 元素的 ID 是更好的选择，但我想知道如何检测 Angular 的 HTML 元素的 ID。请给我一个建议。

Answer 1

您已经将整个 item 对象传递给 onTopNavClick 事件。根据您的 html，项目对象应包含标题和任何其他有助于识别项目的数据。

然后，您将整个item转发到sketchService，因此sketch服务已经知道并且可以使用您提到的任何属性。

我不会依赖标题，因为这似乎是一个用户界面问题，而不是要采取的操作的标识符。
如果可以，请使用更稳定的标识符向 ToolNavItem 添加另一个属性，例如 eventId