6

私は 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()に近づくために を削除すると、エラーが発生します: 。プロバイダーに追加すると、 hereと同じエラーがトリガーされます。このように、ソース コードに従ってクラスを拡張します。No provider found for LayoutDirectiveLayoutDirective, 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 が表示される最後の項目を除いて、1 行に 1 つの項目が正確に表示されます - 画面サイズに応じて、各行に fxHide または fxShow が表示されます

実際の動作は、添付のスクリーンショットに示されているとおりです:大きな画面、アクティブなカスタム メディア クエリ、小さな画面。

ShowHideDirective がデフォルトのブレークポイントに対して機能しなくなっていることがわかります。さらに、カスタム ブレークポイントがアクティブなときに要素を非表示にすることはできますが、反対の動作は機能しません。

すべての npm パッケージを利用可能な最新のものに既に更新し、node_modules フォルダーを削除してnpm install再度実行しましたが、効果はありませんでした。

LayoutDirective, ElementRefまた、プロバイダーのリストに追加してみました。次に、 hereと同じエラーが発生します。

showSmLandscapemyのメソッドに print を追加するCustomShowHideDirectiveと、メソッドが実際に呼び出され、正しい引数が指定されていることがわかります (私が知る限り)。fxShow についても同じことが言えます。

showand hide(node_modules フォルダに直接) に同じ種類のデバッグを追加するとShowHideDirective、 が正しい値で呼び出されることがわかります。

アイデア/ヒント/コメントは大歓迎です。rxjs からのオペレーターのロード中にエラーが発生したため、プランカーをまだ作成できていません...

編集：動作するプランカーがついにここで利用可能になりました（動作するということは、予期しない動作を示すことを意味します^^）

貢献していただきありがとうございます;）

4

1 に答える 1