Angular: open component in a new window without ability to change URL and html head is the same as in the main app html

Question

我必须创建一个打开带有“操作方法”视频的“弹出窗口”的功能。 我说弹出是因为客户希望它可移动（例如将其移动到另一个显示器）。 所以基本上我不能使用任何材料组件，因为它们仅适用于浏览器 window。 所以我准备了一个组件，让我能够在另一个 window 中打开任何我想要的东西。

@Component({
  selector: 'app-window',
  templateUrl: './window.component.html',
  styleUrls: ['./window.component.scss']
})
export class WindowComponent implements OnDestroy {
  @ViewChild(CdkPortal, {static: false}) portal: CdkPortal;
  @Output() windowClosed: EventEmitter<any> = new EventEmitter<any>();

  private externalWindow = null;

  constructor(
    private componentFactoryResolver: ComponentFactoryResolver,
    private applicationRef: ApplicationRef,
    private injector: Injector) {
  }

  ngOnDestroy() {
    this.windowClosed.emit();
    this.externalWindow.close();
  }

  openWindow() {
    this.externalWindow = window.open('', '', 'width=600,height=400,left=200,top=200');

    const host = new DomPortalHost(
      this.externalWindow.document.body,
      this.componentFactoryResolver,
      this.applicationRef,
      this.injector
    );

    host.attach(this.portal);
  }
}

模板：

<ng-container *cdkPortal>
  <ng-content></ng-content>
</ng-container>

它可以工作，但是在 window 中打开的 html 的头部是空的，所以我没有在我的应用程序中使用的任何 styles。 我想要实现的是至少有材料 styles，但我更喜欢在我的应用程序中拥有我所拥有的一切。

如果有人想看看它是如何工作的，这是 stackblitz 示例： https://stackblitz.com/edit/angular-open-window-bvenwh

Answer 1

最好的方法是，为您的弹出窗口创建一条路线 window 并这样做

在 route.module.ts

[{
  path: 'new-tab', component: NewTabComponnet
}}

在组件.ts

 openInNewTab()  {
     window.open(`${window.location.origin}/new-tab/`);
    }