Правильное использование FxLayout Custom Breakpoint Directive - PullRequest
Новая
       24

Правильное использование FxLayout Custom Breakpoint Directive

1 голос
/ 05 февраля 2020

Я успешно следовал этому руководству BreakPoints · угловой / flex-layout Wiki · GitHub , чтобы создать точку останова (max-width: 768px) и создал для нее псевдоним xs.ipad

В руководстве было Я установил директиву, которой я следовал, и использовал селектор [fxHide.xs.ipad]

. Если я помещу это в элемент HTML, элемент будет скрыт под 768px. Отлично.

Но я хочу использовать fxHide fxShow.xs.ipad, чтобы показать сообщение только на ширине экрана, меньшей этой пользовательской точки останова.

Если я в директиве поменяю селектор на fxShow.xs.ipad тогда это работает, но я хочу, чтобы оба селектора были доступны. Я уверен, что мне не нужно создавать другую директиву только для fxShow, поэтому мой вопрос: как мне настроить мою директиву так, чтобы оба селектора работали?

custom.breakpoints.ts 

import { BREAKPOINT } from "@angular/flex-layout";

const IPADPORTRAIT_BREAKPOINT = {
  alias: 'xs.ipad',
  suffix: 'XsIpad',
  mediaQuery: '(max-width: 768px)',
  overlapping: false
};

export const CustomBreakPointsProvider = {
  provide: BREAKPOINT,
  useValue: IPADPORTRAIT_BREAKPOINT,
  multi: true
};

breakpoint.directive.ts 

import { Directive} from '@angular/core';
import { ShowHideDirective } from '@angular/flex-layout';

const selector = `[fxHide.xs.ipad]`;
const inputs = ['fxHide.xs.ipad'];

@Directive({selector, inputs})
export class BreakpointDirective extends ShowHideDirective {
  protected inputs = inputs;
}

Я новичок в директивах, я пытался удалить fxHide и просто xs.ipad но это не работает.

Требуемый результат 

<div fxHide.xs.ipad>
   <h1>This will be viewable on everything wider than iPad portrait</h1>
</div>

<div fxHide fxShow.xs.ipad>
   <h1>This will be viewable only on screens smaller than iPad Portrait</h1>
</div>
...