私は角度（v5.0.2）と角度 - FlexLayout（v2.0.0-beta.10-4905443）を使用しています。私は、@ angular/flex-layoutによって提供されるすべてのディレクティブでカスタムブレークポイントを使用しようとしています。私はShowHideDirectiveを高めていカスタムブレークポイントと角度/フレックスレイアウトを使用した表示/非表示
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],
};
：
私が追加したカスタムのブレークポイントdocに近い滞在する@Optional() @Self()を削除
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)}
}
はエラーをトリガ：No provider found for LayoutDirective。プロバイダーにLayoutDirective, ElementRefを追加すると、hereと同じエラーが発生します。私はこのようにしてsource codeのクラスを拡張します。
：
@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>
予想される動作は、このように次のようになります。 - 画面サイズに関係なく、1つの項目が1行に表示されます。ただし、使用可能なすべてのmediaQueriesが表示される最後の項目は除きます。 - 各行の画面サイズに応じてfxHideまたはfxShowが表示されます
実際の動作は添付のスクリーンショットに示されているとおりです：Large screen、Custom media query activated、Small screen。
ShowHideDirectiveがデフォルトのブレークポイントではもう動作しないことがわかります。また、カスタムブレークポイントがアクティブなときに要素を非表示にできますが、逆の動作は機能しません。
すべてのnpmパッケージを最新のものに更新しました。node_modulesフォルダを削除して、もう一度npm installを実行しました。
また、プロバイダーのリストにLayoutDirective, ElementRefを追加しようとしました。私はhereと同じエラーを取得します。
showSmLandscapeの方法で印刷すると、CustomShowHideDirectiveというメソッドが実際に呼び出され、適切な引数が付いていることが分かります。 fxShowの場合と同じです。
showとhide（同じnode_modulesフォルダに直接）に同じ種類のデバッグを追加すると、ShowHideDirectiveが正しい値で呼び出されていることがわかります。
アイデア/ヒント/コメントは大歓迎です。私はrxjsからオペレータをロードするエラーのために、まだplunkerを作成することはできませんでした...
編集：作業plunkerがhere（予期しない動作を示す^^作業手段）最後に利用可能な任意の貢献のための
感謝;）