Korzystanie z poniższego kodu pomyślnie ukryj znacznik DIV.

Plik HTML

  <mat-toolbar style="position: fixed;"  *ngIf="div1"  >
    <mat-toolbar-row>
      <div class="input-group has-search">
        <input class="form-control py-2 rounded-pill mr-1 pr-5"  placeholder="Search">
      </div>
    </mat-toolbar-row>
    </mat-toolbar>

  <button (click)="home()></button>

Plik TS.

 div1:boolean=true;

    home()
      {
        this.div1=false;
     }

Ale widzę przestrzeń. Ze względu na pozycję paska narzędzi jest ustalona. Jak zmienić pozycję paska narzędzi w metodzie "Home ()". (Ex: Pozycja: stała krewna)

0
Nirodha Wickramarathna 8 czerwiec 2021, 19:49

2 odpowiedzi

Najlepsza odpowiedź

Możesz to zrobić kilka różnych sposobów, możesz użyć [ngstyle], który ustawi wszystkie style. Możesz użyć [Class.ClassName] = "true / false" lub jakbym tutaj właśnie ustawić styl bezpośrednio.

Jednak * NGIF powinien całkowicie usunąć element, więc kwestia stylizacji, którą widzisz, może być niepowiązany.

  <mat-toolbar [style.position]="div1 ? 'fixed' : 'static'" *ngIf="div1"  >
     <mat-toolbar-row>
        <div class="input-group has-search">
           <input class="form-control py-2 rounded-pill mr-1 pr-5" placeholder="Search">
         </div>
      </mat-toolbar-row>
   </mat-toolbar>

   <button (click)="home()></button>
1
Vince 8 czerwiec 2021, 17:05

Możesz zatrudnić nieruchomość ngStyle, coś w rodzaju:

 
<mat-toolbar [ngStyle]="{'position': div1 ? 'fixed' : 'static' }" *ngIf="div1"  >
    <mat-toolbar-row>
      <div class="input-group has-search">
        <input class="form-control py-2 rounded-pill mr-1 pr-5"  placeholder="Search">
      </div>
    </mat-toolbar-row>
    </mat-toolbar>

  <button (click)="home()></button>
<mat-toolbar>
3
shaktimaan 8 czerwiec 2021, 16:58