我找到了这个解决方案 有效吗?
import {Component} from '@angular/core';
import {Platform} from 'ionic-angular';
@Component({...})
export MyApp {
constructor(platform: Platform) {
platform.ready().then((readySource) => {
console.log('Width: ' + platform.width());
console.log('Height: ' + platform.height());
});
}
}
Run Code Online (Sandbox Code Playgroud)
这种解决方案适用于离子2.我还可以用于角2吗?
请建议我正确的方法.
我的 Angular 应用程序中有这个浮动按钮,
<button [ngClass]="{
'mdc-fab--extended': extendedClass,
'mdc-fab--mini': miniClass
}" class="mdc-fab mdc-fab--touch ">
<div class="mdc-fab__ripple"></div>
<span class="material-icons mdc-fab__icon">mail</span>
<!-- <span class="floating-span">My Invite Link</span> -->
<div class="mdc-fab__touch"></div>
Run Code Online (Sandbox Code Playgroud)
当屏幕尺寸为 768px 或更低时,我需要将 mdc-fab--extended className 更改为 mdc-fab--mini 吗?我可以做什么来实现这个功能?谢谢
我已经尝试过,但课程没有被删除/添加
if (window.innerWidth < 768) {
this.miniClass = true;
this.extendedClass = false;
} else {
this.miniClass = false;
this.extendedClass = true;
}
Run Code Online (Sandbox Code Playgroud)