* ng如果在手机屏幕上隐藏一些内容,Angular 4

自然力量:

我有:

showHide: false;

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

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

在最大宽度:768px上,我有一个按钮。最小宽度:768像素时,该按钮处于隐藏状态。当我单击按钮时-它显示了DIV。它工作正常。

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

最大高度:768像素

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

最小高度:768像素:

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

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

Swoox:

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

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

HTML:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

仅在手机屏幕尺寸上使用slick.js

在手机中隐藏Bootstrap模式

在小屏幕(手机等)上隐藏Google Maps控件

固定元素在手机屏幕外

手机键盘中的“完成”按钮(快速键4)

在较小的屏幕上为Bootstrap 4隐藏一列

在手机屏幕上,我想从第三个删除div:jQuery

语音识别结果在手机和平板电脑上两次调用

如果在QMessageBox中单击“是”按钮,则打印一些内容

Bootstrap4:“ col-12”在手机屏幕上仍然太宽,如何包装文字?

Laravel4-以访客身份进入时隐藏一些功能的视图

Bootstrap 3大按钮在手机屏幕上突兀

如果在4月1日之后执行代码

Rails 4模型预订策略-EventMachine?状态机?一些组合吗?

在手机屏幕上的布局不会更改

如果在log4j的getlogger(“ ...”)方法上找不到指定的日志文件,会发生什么情况

Twitter Bootstrap模式在手机屏幕上无法正常显示

可折叠的导航栏在手机屏幕上不可见

背景图像未出现在手机屏幕上

Bootstrap 4导航栏在手机上重叠

如何让我的广告显示在手机的主屏幕上?

如果在 bitbucket 上发布任何信息,是否有关于 Jose4J 漏洞的页面?

ExtJS 4 智能手机尺寸

angular 4 限制一些特殊字符和零

如何通过devapp在Ionic 4的firebase存储上上传手机拍摄的照片

如果购物车有超过 4 件来自特定运输类别的物品,则隐藏一些运输方式

我在手机屏幕上的菜单有问题

如果在 cakephp 4 中的随机查找查询上使用分页,会得到意外的结果吗?

我的 html 导航栏在手机屏幕上无法正常工作