如何清除来自其他组件的ngModel值？

Question

我有一个组件，其中[（ngModel）] = attrProps._value在用户输入上进行设置，并且在默认情况下已经存在时也获得值。 现在，有一个按钮可以在用户希望具有自定义值时指向值选项切换按钮。

但是，当用户单击刷新按钮时，输入字段中的值应该清楚吗？

@Component({
    selector: 'n-customValue',
    template: `
            <mat-form-field class="inputfield-attr-view">
                <input matInput [(ngModel)]="attrProps._value" placeholder="{{bKeeperService.getAttributeType(attrProps).displayAs}}">
                <mat-icon matSuffix (click)="revertIcon()" class="editButton">
                    <img class="attributeview-button" src="../../assets/icons/refresh.svg">
                </mat-icon>
              </mat-form-field>
    `
})
export class customValueComponent implements OnInit {
    @Output() clickEvent: EventEmitter<string> = new EventEmitter<string>();

    constructor(public myservice: customService) { }

    ngOnInit(): void { }
    
    revertIcon() {
        this.clickEvent.emit('REVERT_EVENT');

    }
}

我尝试使用元素ref，但无法解决。

@Component({
    selector: 'n-customvalue',
    template: `
            <mat-form-field class="inputfield-attr-view">
                <input matInput [(ngModel)]="attrProps._value" #searchInput placeholder="{{bKeeperService.getAttributeType(attrProps).displayAs}}">
                <mat-icon matSuffix (click)="revertIcon()" class="editButton">
                    <img class="attributeview-button" src="../../assets/icons/refresh.svg">
                </mat-icon>
              </mat-form-field>
    `
})
export class customvalueComponent implements OnInit {
    @Output() clickEvent: EventEmitter<string> = new EventEmitter<string>();
    @Input('nAttrProps') nAttrProps;
    @ViewChild('searchInput') searchInput: ElementRef;

    attrPropsValue;
    constructor(public myservice: customService) { }

    ngOnInit(): void { }

    revertIcon() {
        this.clickEvent.emit('REVERT_EVENT');
        this.searchInput.nativeElement.value = '';

    }
}