ฉันมี webapp เชิงมุมโดยใช้วัสดุเชิงมุม ใน HTML ของฉันฉันมี ButtonToggles สองอันที่คุณสามารถสลับด้วยตัวจัดการเหตุการณ์การคลิกแบบง่าย ๆ ซึ่งฉันจัดการเอง อย่างไรก็ตาม ควรมีวิธีสลับปุ่มด้วยแป้นพิมพ์ลัดด้วย ฉันมีตัวฟังเหตุการณ์การกดปุ่มที่สกัดกั้นการกดปุ่มอย่างถูกต้อง แต่ฉันไม่รู้ว่าจะสลับปุ่มที่เกี่ยวข้องได้อย่างไรเนื่องจากฉันไม่สามารถส่งผ่านไปยังตัวจัดการเหตุการณ์ได้
นี่คือ html ของฉัน
<mat-button-toggle-group [multiple]="schema.multi">
<mat-button-toggle *ngFor="let label of schema.labels"
(click)="toggleAnnotation(label, localButton)"
[value]="label.name"
#localButton
[style.background-color]="localButton.checked == true ? label.backgroundColor : 'ghostwhite'">
{{label.name}} ({{label.shortcut}})
</mat-button-toggle>
</mat-button-toggle-group>
</div>
และ typescript ที่เกี่ยวข้อง:
import {Component, EventEmitter, HostListener, Input, OnChanges, Output, SimpleChanges} from '@angular/core';
import {Label} from '../sequence/models/label';
import {TagAssignment} from '../../../models/tag-assignment';
import {MatButtonToggle, MatButtonToggleGroup} from "@angular/material/button-toggle";
export class CategoricalTaggerSchema {
multi: boolean; // can the user select multiple tags at once
prompt: string; // message to display before showing the tagger document
labels: Label[]; // categories to select from
}
@Component({
selector: 'app-categorical',
templateUrl: './categorical-tagger.component.html',
styleUrls: ['./categorical-tagger.component.css']
})
export class CategoricalTaggerComponent implements OnChanges {
@Input() config: TagAssignment = new TagAssignment(); // default to some value
@Output() valueChange = new EventEmitter<string>();
@Output() validChange = new EventEmitter<boolean>();
@Input() disabled = false;
schema: CategoricalTaggerSchema = {multi: false, prompt: '', labels: []};
annotations = new Set<string>(); // much simpler then sequence tagging, just a list of named labels
constructor() {}
ngOnChanges(changes: SimpleChanges): void {
if (changes.hasOwnProperty('config')) {
this.schema = JSON.parse(this.config.tag_schema);
}
}
toggleAnnotation(label: Label, localButton) {
if (!this.disabled) {
if (this.annotations.has(label.name)) {
this.annotations.delete(label.name);
localButton.checked = false;
} else { // creating new annotation
if (!this.schema.multi) { // only one annotation allowed
this.annotations.clear();
}
this.annotations.add(label.name);
}
}
this.emitChanges();
console.log(this.annotations);
}
emitChanges() {
this.valueChange.emit(this.getValue());
this.validChange.emit(this.isValid());
}
@HostListener('document:keypress', ['$event'])
handleKeyboardEvent(event: KeyboardEvent) {
// detect keypress for shortcut
for (const label of this.schema.labels) {
if (label.shortcut === event.key) {
this.toggleAnnotation(label, null);
break;
}
}
}
getValue(): string {
return JSON.stringify(Array.from(this.annotations));
}
isValid(): boolean {
return (this.annotations.size > 0);
}
reset(): void {
this.annotations.clear();
}
}
สิ่งเดียวที่ฉันคิดได้ก็คือเรียกใช้ฟังก์ชันจาก HTML บนการโหลดส่วนประกอบที่เพิ่มปุ่มสลับทั้งหมดลงในอาร์เรย์หรือแผนที่ที่ TS เข้าถึงได้ และค้นหาโดยใช้ทางลัดเมื่อฉันต้องการ แต่ดูเหมือนว่า เหมือนวิธีแก้ปัญหาแบบแฮ็ก
แก้ไข: ฉันได้ลองใช้ ViewChild แล้ว แต่เนื่องจากฉันไม่สามารถเริ่มต้นรหัสแบบไดนามิกได้ (มุมมองเชิงมุมสำหรับองค์ประกอบไดนามิกภายใน ngFor) ฉันไม่สามารถเข้าถึงส่วนประกอบเพื่อแก้ไขสถานะที่เลือกได้