单击事件隐藏2个成分角4

Question

我有1个root component at 3 sub-componeNet，我在其中放了一些@input以获取单击事件，然后将它们成功地调用到视图中，所以当我单击我想要的根时，要打开一个子组件(这很好(，但与此同时，我希望另外两个从视图中消失，依此类推，依此类推，但分别(一种div.hidden(...如果您需要更多代码或更多代码或解释不要犹豫。...预先感谢

这是我的root component.html：

    <div class="daydetail">
    <h1>Detail of day</h1>
 <button pButton class="daydetail" type="button" icon="fa-chevron-up" label="Click"(click)="toggleChild()"></button>
     <div>
         <my-daydetail [showMePartially]="showVar"></my-daydetail>
    </div>
</div>
<div class="dailyreport">
    <h1>Daily</h1>
    <my-dailyreport></my-dailyreport>
</div> 
<div class="inventory">
    <my-inventory></my-inventory>
</div> 

这是我的root component.ts：

export class AppliV2Component   {
   showVar = false;
   hideVar = true;
  constructor(public userService: UserService) {
    }
   toggleChild() {
       this.showVar = !this.showVar;
       this.hideVar = !this.hideVar;
       }
}

第一个孩子.html：

<div *ngIf="hideMePartially" class="dailyreport">
     <h1>Daily report</h1>
</div> <!-- Fin de dailyreport -->

first child.ts：

export class MyDailyreportComponent implements OnInit {

 @Input() hideMePartially: boolean;
  constructor() { }

第二个孩子.html：

<div *ngIf="showMePartially" class="daydetail2" > <!-- this part will be toggled by the parent component button  -->

<h1>Informations</h1>
</div>

第二个孩子：

  export class MyInventoryComponent implements OnInit {
      @Input() hideMePartially: boolean;

Answer 1

首先， *ngif不会隐藏/显示组件。它将添加/删除它。有区别。要隐藏组件，您应该使用[hidden]="true/false"

在您的情况下，您可以做类似的事情：

<div [hidden]="displayDetail" class="daydetail2" > 

，然后只需创建 displayDetail 组件打字稿中类型布尔值的变量。

之后，您可以轻松地创建切换方法来将 DisplayDetail 设置为True或False。

toggleDisplay(){
  this.displayDetail != this.displayDetail;
}

您可以在模板中调用该方法。

<button (click)="toggleDisplay();"> Toggle Button </button>

注意：可以覆盖[隐藏]的CSS，因此您可能需要将其添加到组件CSS

[hidden] { display: none !important;}