[英]How do I update Angular styling using ElementRef?
I am new to Angular
I am working on a bottom that updates the styling when pressed.我是
Angular
新手,我正在研究一个底部,按下时会更新样式。 Here is a copy of the HTML page.这是 HTML 页面的副本。
<nav>
<button #toggleNavigation aria-expanded="false">
<mat-icon>menu</mat-icon>
</button>
<div class="sidebar-sticky collapse navbar-collapse">
<ul>
<side-menu-item *ngFor="let item of navItems" [hidden]="item.isHidden"
[finished]="item.finished" [name]="item.displayName"
[routeURL]="item.routeURL"
[ngClass]="{'mt-auto': item.name === 'Summary'}">
</side-menu-item>
</ul>
</div>
</nav>
When the button is pressed, this is what I would like it to update to.当按下按钮时,这就是我希望它更新的内容。
<nav>
<button #toggleNavigation aria-expanded="true">
<mat-icon>menu</mat-icon>
</button>
<div class="sidebar-sticky collapse navbar-collapse show">
<ul>
<side-menu-item *ngFor="let item of navItems" [hidden]="item.isHidden" [finished]="item.finished" [name]="item.displayName" [routeURL]="item.routeURL" [ngClass]="{'mt-auto': item.name === 'Summary'}"></side-menu-item>
</ul>
</div>
</nav>
Clicking the button will display a navigation list.单击该按钮将显示导航列表。 As you see in the code the styling is updated from
class="sidebar-sticky collapse navbar-collapse"
to class="sidebar-sticky collapse navbar-collapse show"
.正如您在代码中看到的,样式从
class="sidebar-sticky collapse navbar-collapse"
为class="sidebar-sticky collapse navbar-collapse show"
。 Originally, I using a bootstrap.js file to handle this but it interfered with styling associated with another program.最初,我使用 bootstrap.js 文件来处理这个问题,但它干扰了与另一个程序关联的样式。 In my
.ts
file this is what I have在我的
.ts
文件中,这就是我所拥有的
import { Component, ElementRef, Renderer2, ViewChild } from '@angular/core';
@Component({
selector: 'app-side-menu',
templateUrl: './side-menu.component.html',
styleUrls: ['./side-menu.component.scss']
})
export class NavMenuComponent {
@ViewChild('toggleNavigation', {static: false}) toggleNavigation: ElementRef;
constructor() {
onToggleNavigation() {
}
}
Any help would be greatly appreciated.任何帮助将不胜感激。
I would do this with [ngClass]
.我会用
[ngClass]
做到这一点。
Try:尝试:
<nav>
<button #toggleNavigation aria-expanded="true" (click)="onToggleNavigation()">
<mat-icon>menu</mat-icon>
</button>
<div class="sidebar-sticky collapse" [ngClass]="{'show': !collapseSideNav}">
<ul>
<side-menu-item
*ngFor="let item of navItems"
[hidden]="item.isHidden"
[finished]="item.finished" [name]="item.displayName"
[routeURL]="item.routeURL"
[ngClass]="{'mt-auto': item.name === 'Summary'}"
(click)="collapseNavigation()"
>
</side-menu-item>
</ul>
</div>
</nav>
collapseSideNav: boolean = true; // can default it to whatever you like
onToggleNavigation() {
this.collapseSideNav = !this.collapseSideNav;
}
collapseNavigation() {
if (!this.collapseSideNav) {
this.collapseSideNav = true;
}
}
Use [ngClass]
for this:为此使用
[ngClass]
:
<nav>
<button [attr.aria-expanded]="collapsed" (click)="collapsed = !collapsed">
click
</button>
<div [ngClass]="{'show' : collapsed}" class="sidebar-sticky collapse navbar-collapse">
<ul>
content
</ul>
</div>
</nav>
https://stackblitz.com/edit/angular-3rn8no?file=src%2Fapp%2Fapp.component.ts https://stackblitz.com/edit/angular-3rn8no?file=src%2Fapp%2Fapp.component.ts
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.