我正在使用 Angular(v5.0.2) 和 Angular-FlexLayout (v2.0.0-beta.10-4905443)。我正在尝试对@angular/flex-layout 提供的每个指令使用自定义断点。
我添加了自定义断点:
import {DEFAULT_BREAKPOINTS, BREAKPOINTS} from '@angular/flex-layout';
const CUSTOM_BREAKPOINTS = [
{
alias: 'sm.landscape',
suffix: 'SmLandscape',
mediaQuery: 'screen and (min-width:55em) and (max-width: 80em) and (orientation: landscape)',
overlapping: true
}
];
export const CustomBreakPointsProvider = {
provide: BREAKPOINTS,
useValue: [...DEFAULT_BREAKPOINTS,...CUSTOM_BREAKPOINTS],
};
我扩展了 ShowHideDirective:
import { Directive, ElementRef, Renderer2, Input, Optional, Self } from '@angular/core'
import { ShowHideDirective, negativeOf, LayoutDirective, MediaMonitor } from '@angular/flex-layout'
@Directive({
selector: `
[fxHide.sm.landscape],
[fxShow.sm.landscape],
`
})
export class CustomShowHideDirective extends ShowHideDirective {
constructor(monitor: MediaMonitor, @Optional() @Self() protected _layout: LayoutDirective, protected elRef: ElementRef, protected renderer: Renderer2) {
super(monitor, _layout, elRef, renderer)
}
@Input('fxHide.sm.landscape') set hideSmLandscape(val) {this._cacheInput("showSmLandscape", negativeOf(val))}
@Input('fxShow.sm.landscape') set showSmLandscape(val: boolean) {this._cacheInput("showSmLandscape", <boolean>val)}
}
删除@Optional() @Self()
以保持更接近文档会触发错误:No provider found for LayoutDirective
. 添加到提供程序会触发与此处LayoutDirective, ElementRef
相同的错误。因此,我在源代码之后扩展了该类。
我使用我在 app.module 中定义的内容:
@NgModule({
declarations: [
AppComponent,
CustomShowHideDirective,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
HttpModule,
FlexLayoutModule,
],
providers: [
CustomBreakPointsProvider
],
bootstrap: [AppComponent]
})
我根据屏幕的大小显示或隐藏元素:
<p>
<span fxHide="false" fxHide.sm="true">fxHide.sm</span>
<span fxShow="false" fxShow.sm="true">fxShow.sm</span>
</p>
<p>
<span fxHide="false" fxHide.sm.landscape="true">fxHide.sm.landscape</span>
<span fxShow="false" fxShow.sm.landscape="true">fxShow.sm.landscape</span>
</p>
<p>
<span fxHide="true" fxHide.sm.landscape="false">hack fxShow.sm.landscape</span>
<span fxShow="true" fxShow.sm.landscape="false">hack fxHide.sm.landscape</span>
</p>
<p>
<span fxHide fxShow.sm.landscape>hack2 fxShow.sm.landscape</span>
<span fxShow fxHide.sm.landscape>hack2 fxHide.sm.landscape</span>
</p>
<p>
<span fxHide="false" fxHide.gt-sm="true">fxHide.gt-sm</span>
<span fxShow="false" fxShow.gt-sm="true">fxShow.gt-sm</span>
</p>
<span *ngIf="media.isActive('sm')">sm</span>
<span *ngIf="media.isActive('sm.landscape')">sm.landscape</span>
<span *ngIf="media.isActive('md')">md</span>
<span *ngIf="media.isActive('lg')">lg</span>
因此,预期的行为如下: - 无论屏幕大小如何,每行只显示一个项目,除了最后一个项目,其中显示所有可用的 mediaQueries - 每行显示 fxHide 或 fxShow,具体取决于屏幕大小
实际行为如所附屏幕截图所示:大屏幕,自定义媒体查询已激活,小屏幕。
您会看到 ShowHideDirective 不再适用于默认断点。此外,当自定义断点处于活动状态时,我可以隐藏一个元素,但相反的行为不起作用。
我已经将我所有的 npm 包更新到最新可用的,删除 node_modules 文件夹并npm install
再次运行,但没有效果。
我还尝试添加LayoutDirective, ElementRef
到提供者列表中。然后我得到与这里相同的错误。
showSmLandscape
在my的方法中添加 printCustomShowHideDirective
表明该方法确实被调用,并且具有正确的参数(据我所知)。fxShow 也是如此。
show
在and中添加相同类型的调试hide
(直接在我的 node_modules 文件夹中)表明ShowHideDirective
使用正确的值调用了。
欢迎任何想法/提示/评论。由于从 rxjs 加载运算符时出错,我还没有设法创建一个 plunker...
编辑:终于可以在这里使用工作的 plunker (工作意味着显示意外行为 ^^)
感谢您的任何贡献;)