使用自定义断点和角度/弹性布局显示/隐藏

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()使其与文档更接近会触发错误：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>

因此，预期的行为如下：-无论屏幕大小如何，每行仅显示一个项目，最后一行除外，在最后一行显示所有可用的媒体查询-每行显示fxHide或fxShow，具体取决于屏幕大小

实际行为如所附屏幕快照所示：大屏幕，激活自定义媒体查询，小屏幕。

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

我已经将所有npm软件包更新为最新的可用软件包，删除了node_modules文件夹，然后npm install再次运行，没有任何效果。

我也尝试添加LayoutDirective, ElementRef到提供商列表中。然后我得到了和这里相同的错误。

在showSmLandscape我的方法中添加印刷品CustomShowHideDirective表明该方法确实已调用，并带有正确的参数（据我所知）。对于fxShow也是如此。

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

欢迎任何想法/提示/评论。由于从rxjs加载运算符时发生错误，我尚未设法创建一个插件。

编辑：这里终于可以使用工作的监听器了（工作意味着显示意外的行为^^）

感谢您的贡献;）

Answer 1

这似乎是过时的文档和错误的组合：请参阅github 存储库上的此问题，引用更精确的错误

希望这个问题能尽快得到解决；）