我想使用一些按钮来显示/隐藏多个div
该页面最初将显示所有div。 当小屏幕我隐藏所有div时,然后分开按钮以显示特定div,同时隐藏其余部分。
任何帮助将不胜感激。
<div class="buttons">
<a class="button" id="showdiv1">Div 1</a>
<a class="button" id="showdiv2">Div 2</a>
<a class="button" id="showdiv3">Div 3</a>
</div>
<div class="row">
<div class="col-xlg-4 col-xl-5 col-lg-12 col-sm-12 col-xs-12 hidden-sm-down">
</div>
<div class="col-xlg-4 col-xl-5 col-lg-12 col-sm-12 col-xs-12 hidden-sm-down">
</div>
<div class="col-xlg-4 col-xl-5 col-lg-12 col-sm-12 col-xs-12 hidden-sm-down">
</div>
</div>
将@HostListener
与 resize
事件一起使用来确定视区的宽度。然后在组件中设置具有此值的赋值属性,然后可以将其提供给 HTML 模板中的ngIf*
。
import { Component, HostListener, AfterViewInit } from '@angular/core';
@Component()
export class AppComponent {
windowWidth: number = window.innerWidth;
//initial values, The window object may still be undefined during this hook, let me know if that's the case and we'll figure out a better hook for the initial value
ngAfterViewInit() {
this.windowWidth = window.innerWidth;
}
//if screen size changes it'll update
@HostListener('window:resize', ['$event'])
resize(event) {
this.windowWidth = window.innerWidth;
}
}
<!-- Then any HTML element you wish to toggle apply the *ngIf directive as so: -->
<div *ngIf*="windowWidth > 800">content</div>