Я использую 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 вызывает ошибки: 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 моего CustomShowHideDirective показывает, что метод действительно вызывается и с правильными аргументами (насколько я могу судить). То же самое и с fxShow.

Добавление такого же вида отладки в show и hide (прямо в моей папке node_modules) показывает, что ShowHideDirective вызывается с правильными значениями.

Любые идеи / подсказки / комментарии приветствуются. Создать плункер пока не удалось из-за ошибок загрузки операторов из rxjs ...

Изменить: наконец-то доступен рабочий плункер здесь (рабочий означает демонстрацию неожиданного поведения ^^ )

Спасибо за любой вклад;)

5
Moi 20 Ноя 2017 в 22:39

1 ответ

Лучший ответ

Это похоже на комбинацию устаревшей документации и ошибки: см. эту проблему на github репо, ссылаясь на более точную ошибку

Надеюсь, это скоро исправят;)

0
Moi 16 Янв 2018 в 22:47