Mat-select 不会从同级组件重置

Question

当我单击放置 mat-select 的组件（子二）中的按钮时，重置工作正常，但如果我单击同级组件（子一）中的重置按钮它不起作用。我怎样才能做到这一点？

父组件HTML

 <div class="styling">
    <child-one
       (reset)="reset($event)">
    </child-one>
 </div>
 <mat-sidenav #sidenav [mode]="'over'" class="sidenav">
    <child-two
       class="content-style">
    </child-two>
 </mat-sidenav>

父组件 TS

  @ViewChild(ChildOne) childOneComponent;
  @ViewChild(ChildTwo) childTwoComponent;

  reset($event: boolean) {
     if ($event) {
         this.childTwoComponent.resetMatSelect();
     }
  }

ChildTwo 组件 HTML

   <mat-form-field *ngIf="list && list.length > 0" appearance="legacy">
        <mat-label>Cities</mat-label>
        <mat-select [(ngModel)]="selectedCity"
                    (selectionChange)="emit($event.value)">
            <mat-option [value]="null" i18n>City</mat-option>
            <mat-option *ngFor="let city of list"
                        [value]="city">
                {{city?.name}}
            </mat-option>
        </mat-select>
    </mat-form-field>
    <button mat-stroked-button (click)="resetMatSelect()">reset</button>

ChildTwo 组件 TS

  resetMatSelect() {
     this.selectedCity = null; 
  }

ChildOne 组件 HTML

<button mat-stroked-button  *ngIf="showResetButton()" (click)="resetFilters()">
    <mat-icon>restart_alt</mat-icon>
</button>

ChildOne 组件 TS

resetFilters() {
    this.filters.cities = null;
    this.reset.emit(true);
}

Answer 1

问题已解决，原因完全不同，但我认为 post 如果我解释一下，可以节省一次或另一次时间。解释：

父子组件之间的绑定正常工作。但是在父组件中使用两次（或多次）相同的子组件时要小心。

在父组件中，我在两个地方有childTwo-component

 <div class="styling">
    <child-one
       (reset)="reset($event)">
    </child-one>
 </div>
 <mat-sidenav #sidenav [mode]="'over'" class="sidenav">
    <child-two
       class="content-style-port">
    </child-two>
 </mat-sidenav>
       .
       . (more code)
       . 
   <child-two
     class="content-style">
   </child-two>

我在两个地方使用它的原因是，该组件必须响应并具有特定的宽度，它应该消失并且 'move' 进入 sidenav。所以每次点击重置按钮时，重置都是在不可见的组件中执行的。

问题解决如下：

HTML

<child-two *ngIf="!enableSidenavFilter"
     class="content-style">
</child-two>

TS

 enableSidenavFilter = false;

 @HostListener('window:resize', ['$event'])
 onResize(event) {
    this.enableSidenavFilter = window.innerWidth < 1000;
 }

Mat-select 不会从同级组件重置

Mat-select won't reset from sibling component

angular

typescript

angular-material

angular13