Angular:如何使用与cdkConnectedOverly的指令微同步?

角度编译器希望微同步以值开头

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

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

自从 CdkConnectedOverlay @Input 有名字的 CdkConnectedOverlay

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

要解决这个问题,可以使用 [cdkConnectedOverlay] 选择器和 属性,但我将使用第一个解决方案:

<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">

要解决这个问题,可以通过 通过创建其他指令,例如:

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

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

然后在组件中捕获事件:

组件.html

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

组件.ts

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

Ng-run Example