通过子组件引用覆盖相同属性后无法更改输入属性 - @ViewChild() 第一个子组件第二个子组件父模板文件父打字稿文件

如何解决通过子组件引用覆盖相同属性后无法更改输入属性 - @ViewChild() 第一个子组件第二个子组件父模板文件父打字稿文件

我试图通过@ViewChild 从父组件切换子组件的可见性。
我正在将父组件的 visiblity 的两个子组件的 allComponentVisibility=true 设置为 true。

在某些事件中，我设置了 allComponentVisibility=false 并通过 @viewchild 更改了特定组件的 visiblity=true。

但是当我在 _AppComponent.ts

中设置 visiblity 时，allComponentVisibility=false 不会改变

第一个子组件

export class RecipesComponent implements OnInit {
  @Input('setRecipeVisibility') visibility: boolean;  
}

第二个子组件

export class ShoppingListComponent implements OnInit {
  @Input('setShoppingListVisiblity') visibility : boolean;
}

父模板文件

<app-header 
  (onRecipeEventFired)="setRecipeVisible()" 
  (onshoppingListEventFired)="setShoppingListVisible()">
</app-header>

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <app-recipes 
        [setRecipeVisibility]="allComponentVisibility" 
        #recipeReference>
      </app-recipes>
      <app-shopping-list 
        [setShoppingListVisiblity]="allComponentVisibility" 
        #shoppingListReference>
      </app-shopping-list>
    </div>
  </div>
</div>

父打字稿文件

export class AppComponent {
  @ViewChild(RecipesComponent) recipeReference: RecipesComponent;
  @ViewChild(ShoppingListComponent) shoppingListReference: ShoppingListComponent;

  allComponentVisibility = true;

  setRecipeVisible(){
    this.allComponentVisibility = false;
    this.recipeReference.visibility=true;
  }

  setShoppingListVisible(){
    this.allComponentVisibility = false;
    this.shoppingListReference.visibility=true;
  }
}

解决方法

当您输入 INPUT 时，它会将您传递的变量作为参考所以基本上你在做什么是让孩子的变量被引用到 allComponentVisibility。

因此子项的值将始终与 allComponentVisibility 相同。更改父项或任何子项，将更改相同的引用。

您应该尝试考虑一些其他控制变量以了解哪个组件应该可见，例如您可以将变量分开。