Question

我有一个带有3个子组件的1个根组件，其中我放了一些@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>

这是我的根组件.ts：

export class AppliV2Component   {
   showVar = false;
   hideVar = true;

  constructor(public userService: UserService) {
    }
   toggleChild() {
       this.showVar = !this.showVar;
       this.hideVar = !this.hideVar;
       }
}

第一个child.html：

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

第一个孩子：

export class MyDailyreportComponent implements OnInit {


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

第二个child.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" >

然后在组件打字稿中创建类型为boolean的 displayDetail 变量。

之后，您可以轻松创建切换方法，将 displayDetail 设置为true或false。

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

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

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

注意： [隐藏]的CSS可能会被覆盖，因此您可能希望将其添加到组件CSS

[hidden] { display: none !important;}

点击事件hidde 2组件Angular 4

1 个答案: