* ng如果在手机屏幕上隐藏一些内容，则Angular 4 [英] *ngIf hide some content on mobile screen, Angular 4

问题描述

我有:

showHide: false;

<div *ngIf="showHide">
  Content
</div>

<button (click)="showHide = !showMap">
  Button visited only max-width: 768px
</button>

在最大宽度:768px上，我有一个按钮.最小宽度:768像素时，该按钮处于隐藏状态. 当我单击按钮时-它显示了DIV. 效果很好.

On MAX-width: 768px, I have a button. On MIN-width: 768px the button is hidden. When I click on the button - it shows a DIV. It works fine.

但是

如何使* ngIf仅在最大宽度为768px时起作用?

How do I make *ngIf work only when MAX-width: 768px?

最大高度:768px

max-height: 768px

显示
• 按钮:阻止
• 显示DIV:无(但当我单击按钮= display时:
  阻止)

• button is display: block
• DIV is display: none (but when I click on the button = display:
  block)

最小高度:768像素:

min-height: 768px:

显示
• 按钮:无
• 显示DIV:块

当我将示例尺寸从500px调整为1000px时: 这取决于我按下的按钮

At the moment when I resize from example 500px to 1000px: It depends on button I pressed

推荐答案

您可以使用window.screen.width. 示例:

You can use window.screen.width. Example:

ngOnInit() {
  if (window.screen.width === 360) { // 768px portrait
    this.mobile = true;
  }
}

HTML:

<button *ngIf="mobile" (click)="showHide = !showMap"></button>

这篇关于* ng如果在手机屏幕上隐藏一些内容，则Angular 4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！