Angular:如何将指令微语法与 cdkConnectedOverly 一起使用？

Question

根据Angular docs , 有一个可与结构指令一起使用的微语法。

所以我有一些代码在使用“长手”形式时使用 cdkConnectedOverlay 指令:

  <ng-template 
    cdkConnectedOverlay 
    [cdkConnectedOverlayOrigin]="savedSearchTrigger" 
    [cdkConnectedOverlayOpen]="savedSearchToggle.checked"
    [cdkConnectedOverlayHasBackdrop]="true" 
    [cdkConnectedOverlayBackdropClass]="'transparentOverlayBackdrop'">
    My overlay contents!
  </ng-template>

在阅读了微语法之后，似乎我应该能够将我的代码缩短为:

  <ng-template 
    *cdkConnectedOverlay="origin: savedSearchTrigger; open: savedSearchToggle.checked; hasBackdrop: true; backdropClass: 'transparentOverlayBackdrop'">
     My overlay contents!
  </ng-template>

但是，这不是编译。并给我错误 Cannot read the property 'toUpperCase' of undefined

我想知道我试图在 ng-template 上使用微语法是否是罪魁祸首。

我做错了什么？有变通办法吗？

Answer 1

Angular 编译器期望微语法以值开头

*cdkConnectedOverlay="cdkConnectedOverlayValue; otherProp: otherPropValue...."

或使用变量:

*cdkConnectedOverlay="let x; otherProp: otherPropValue...."

自 CdkConnectedOverlay没有 @Input名字CdkConnectedOverlay那么你不能使用像这样的语法:

*cdkConnectedOverlay="1;origin: savedSearchTrigger;...

要解决它，您可以使用 [cdkConnectedOverlay] 创建一个指令选择器和相同的@Input属性(property)，但我会选择第一个解决方案:

<ng-container *cdkConnectedOverlay="let x;origin: savedSearchTrigger; open: opened; 
                 hasBackdrop: true; backdropClass: 'transparentOverlayBackdrop'">

尽管它可以编译，但您会注意到您的内容没有显示。要修复它，您应该使用 <ng-container *cdkConnectedOverlay而不是 <ng-template *cdkConnectedOverlay这样My overlay contents!内容不会包含在额外的 ng-template 中

最后看看Ng-run Example

更新

请注意，糖 (*)语法不支持 @Output因此该事件不会在以下代码中触发:

<ng-container *cdkConnectedOverlay="..." (backdropClick)="opened = false">

要解决它，您可以将一些处理程序作为 @Input 传递通过创建额外的指令，如:

@Directive({
  selector: '[cdkConnectedOverlayBackdropClick]'
})
export class ConnectedOverlayBackdropClick {
  @Input('cdkConnectedOverlayBackdropClick') backDropHandler: Function;

  @HostListener('backdropClick')
  backdropClick() {
    this.backDropHandler();
  }
}

然后在组件中捕获事件:

component.html

<ng-container *cdkConnectedOverlay="let item; origin: savedSearchTrigger; open: opened; 
hasBackdrop: true; backdropClass: 'transparentOverlayBackdrop'; backdropClick: close">

component.ts

close = () => {
  this.opened = false;
}

Ng-run Example