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的{{1}}，因此您不能使用以下语法：

CdkConnectedOverlay

要解决此问题，您可以使用*cdkConnectedOverlay="1;origin: savedSearchTrigger;...选择器和相同的[cdkConnectedOverlay]属性创建指令，但我会采用第一种解决方案：

@Input

尽管它可以编译，但您可以注意到您的内容未显示。要解决此问题，您应该使用<ng-container *cdkConnectedOverlay="let x;origin: savedSearchTrigger; open: opened; hasBackdrop: true; backdropClass: 'transparentOverlayBackdrop'">而不是<ng-container *cdkConnectedOverlay，以使<ng-template *cdkConnectedOverlay的内容不会被包裹在其他My overlay contents!

中

最后，看看Ng-run Example

更新

请注意，糖ng-template语法不支持(*)，因此不会在以下代码中触发该事件：

@Output

要解决此问题，您可以通过创建其他指令（例如：

）将某些处理程序作为

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

传递

@Input

然后在组件中捕获事件：

component.html

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

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

component.ts

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

Ng-run Example

Angular：如何在cdkConnectedOverly中使用指令microsyntax？

1 个答案: