如何切換Angular中的類

Question

我有一個按鈕，我希望能夠切換div上的類來隱藏和顯示div如何在Angular中執行此操作？

HTML

我想類 「活動」 添加到#chatsidebar DIV

app.component.ts

togglesideBar() { 

} 

感謝

Answer 1

我回答你的問題，這部分：

我想類「活動」添加到#chatsidebar DIV

要做到這一點，你可以使用NgClass。 NgClass允許你根據給定的條件向元素添加或刪除任何類。你的代碼看起來是這樣的：

HTML

<div id="chatsidebar" [ngClass]="{'active': isSideBarActive}"> <!-- this ngClass will add or remove `active` class based on the `isSideBarActive` value --> 
    <app-chatsidebar></app-chatsidebar> 
</div> 
<div> 
    <button type="button" id="sidebarCollapse" class="btn btn-info" (click)="togglesideBar()"> 
    <i class="glyphicon glyphicon-align-right"></i> 
     Toggle Sidebar 
    </button> 
</div> 

組件

isSideBarActive: boolean = true; // initial value can be set to either `false` or `true`, depends on our need 

togglesideBar() { 
    this.isSideBarActive = !this.isSideBarActive; 
} 

Answer 2

採用可變在你的組件裏有點像

isShowChatSidebar:boolean=true; 

然後修改你的方法和HTML

togglesideBar() { 
this.isShowChatSidebar=!this.isShowChatSidebar 
} 

<div id="chatsidebar" [ngClass]="{'active': isShowChatSidebar}">> 
    <app-chatsidebar></app-chatsidebar> 
</div> 

Answer 3

HTML

<div id="chatsidebar" *ngIf="status"> 
     <app-chatsidebar></app-chatsidebar> 
    </div> 
    <div> 
     <button type="button" id="sidebarCollapse" class="btn btn-info" (click)="togglesideBar()"> 
      <i class="glyphicon glyphicon-align-right"></i> 
      Toggle Sidebar 
     </button> 
    </div> 

app.component.ts：

status:boolean=true; 
togglesideBar() { 
     if(this.status == true) this.status=false; 
     else this.status = true; 
} 

演示： https://plnkr.co/edit/fNoXWhUhMaUoeMihbGYd?p=preview

Answer 4

你可以嘗試以下。

<div id="chatsidebar" class="{{activeClass}}"> ... </div> 

和你的組件定義屬性，並設置切換功能

// On Component 
    activeClass : string = ""; 
    ... 

    togglesideBar() { 
     this.activeClass = 'active' 
    } 

類值應工作，但可能不理想的解決方案。

Answer 5

假設你有一個名爲類hide：

<div [class.hide]="hide"> 
    <app-chatsidebar></app-chatsidebar> 
</div> 

<div> 
    <button type="button" class="btn btn-info" (click)="togglesideBar()"> 
     <i class="glyphicon glyphicon-align-right"></i> 
     Toggle Sidebar 
    </button> 
</div> 

togglesideBar() { this.hide = !this.hide; } 

這將隱藏有問題的元素，而在DOM離開它。使用*ngIf的其他解決方案將添加元素並將其從DOM中移除。在特定的情況下，有一些微妙的原因可以讓你更喜歡一個，在你已經閱讀過的在線文檔中有詳細描述。在這種情況下，這並不重要。

的[class.className]=boolean格式只是幾種方法來控制角類之一。例如，你也可以這樣說：

[ngClass]="{'hide': hide}" 

這比較靈活一點，因爲你可以一次添加/刪除多個類。

由於您使用glyphicons，你可能正在使用自舉，所以你很可能已經定義了hide類。

順便說一句，你很少需要身份證，並利用它們幾乎是在角的反模式。