2

我有 2 个组件：一个主组件和一个确认组件（覆盖）。

当在 home 组件上单击一个按钮时，它应该触发确认组件以 Angular CDK Overlay 的形式打开。

问题是我无法通过自定义注入器和注入令牌将任何内容从主组件传递到确认组件，正如许多其他人所建议的那样。Angular CDK：如何在 ComponentPortal 中设置输入

我在 Stackblitz 上的代码：https ://stackblitz.com/edit/angular-overlay-inject

我错过了代码中的一些愚蠢的东西吗？我不断收到 StaticInjectorError 和 NullInjectorError。

在此处输入图像描述

非常感谢第一个人。

家庭组件：

export const OVERLAY_DATA = new InjectionToken<any>("OVERLAY_DATA");

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  constructor(
    public overlay: Overlay,
    public viewContainerRef: ViewContainerRef,
    private injector: Injector
  ) {}

  public onClick() {
    const config = new OverlayConfig({
      hasBackdrop: true,
      scrollStrategy: this.overlay.scrollStrategies.block()
    });
    config.positionStrategy = this.overlay.position()
      .global()
      .centerHorizontally()
      .centerVertically();
    const overlayRef = this.overlay.create(config);
    overlayRef.backdropClick().subscribe(() => {
      overlayRef.dispose();
    });

    const componentPortal = new ComponentPortal(
      HelloComponent,
      this.viewContainerRef,
      this.createInjector('TestDataStringToPass')
    );
    overlayRef.attach(componentPortal);
  }

  private createInjector(dataToPass): PortalInjector {
    const injectorTokens = new WeakMap();
    injectorTokens.set(OVERLAY_DATA, dataToPass);
    return new PortalInjector(this.injector, injectorTokens);
  }
}

覆盖组件：

export class HelloComponent {

  public displayData: any;

  constructor(@Inject("OVERLAY_DATA") public data: any) {
    console.log("OVERLAY_DATA :", data);
    this.displayData = data;
  }
}
4

0 回答 0