Show/Hide 使用自定义断点和 angular/flex-layout

Question

我正在使用 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() 以更靠近 doc triggers errors: No provider found for LayoutDirective. Adding LayoutDirective, ElementRef to the providers triggers the same error as here. I thus extend the class following the source code。

我使用我在 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

实际行为如所附屏幕截图所示：Large screen, Custom media query activated, Small screen。

您看到 ShowHideDirective 不再对默认断点起作用。此外，当自定义断点处于活动状态时，我可以隐藏一个元素，但相反的行为不起作用。

我已经将我所有的 npm 包更新到最新可用的，删除 node_modules 文件夹并再次运行 npm install，但没有效果。

我还尝试将 LayoutDirective, ElementRef 添加到提供商列表中。然后我得到与 here.

相同的错误

在我的 CustomShowHideDirective 的 showSmLandscape 方法中添加打印表明确实调用了该方法，并且使用了正确的参数（据我所知）。 fxShow 也一样。

在 show 和 hide 中添加相同类型的调试（直接在我的 node_modules 文件夹中）显示使用正确的值调用 ShowHideDirective。

欢迎任何idea/hint/comment。由于从 rxjs 加载运算符时出错...

，我还没有设法创建一个 plunker

编辑：一个工作的 plunker 终于可用了 here（工作意味着表现出意想不到的行为 ^^）

感谢您的贡献 ;)

Answer 1

这似乎是过时文档和错误的结合：参见 this issue on the github repo, referencing the more precise bug

希望这个问题能尽快解决 ;)

Show/Hide 使用自定义断点和 angular/flex-layout

Show/Hide using custom breakpoints and angular/flex-layout

angular

angular-flex-layout