Angular FxLayout自定义断点指令的正确用法

我已经成功地按照本指南创建了一个断点

（最大宽度：768px）

，并为它创建了一个别名

xs.ipad

指南让我设置了一个指令，我遵循该指令并使用选择器

[fxHide.xs.ipad]

如果我把它放在一个HTML元素上，该元素就隐藏在768px下面。太好了

但是我想使用

fxHide fxShow.xs.ipad

仅在屏幕宽度小于此自定义断点的情况下显示消息

如果我在指令中将选择器更改为fxShow.xs.ipad，那么这是可行的，但我希望两个选择器都可用。我确信我不需要为fxShow创建另一个指令，所以我的问题是如何设置指令以便两个选择器都能工作

自定义.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
};

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;
}

断点.directive.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
};

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>

这将在比iPad更宽的任何地方都可以看到
这将只能在比iPad更小的屏幕上看到