Question

我有一个按钮，我希望能够在div上切换一个类来隐藏并显示div我将如何在Angular中执行此操作？

HTML

<div id="chatsidebar">
    <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>

我想将“active”类添加到#chatsidebar div

app.component.ts

togglesideBar() {

}

由于

Answer 1

我回答了你问题的这一部分：

我想添加课程＆＃34; active＆＃34;到#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格式只是控制Angular中类的几种方法之一。例如，您也可以说：

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

这稍微灵活一些，因为您可以一次添加/删除多个类。

由于您使用的是glyphicons，因此您可能正在使用Bootstrap，因此您很可能已经定义了hide类。

顺便说一句，你很少需要ID，而使用它们在Angular中几乎都是反模式。

如何在Angular中切换类

5 个答案: