// app.module.ts import { OverlayModule } from '@angular/cdk/overlay'; @NgModule({ imports: [ BrowserModule, OverlayModule ], ... })
// google-login.component.ts import { Overlay } from '@angular/cdk/overlay'; @Component({ selector: 'app-google-login', templateUrl: './google-login.component.html', styleUrls: ['./google-login.component.css'] }) export class GoogleLoginComponent implements OnInit { constructor(private overlay: Overlay) { } ngOnInit() { window.addEventListener('message', (event) => { if (event.data.popupBlocked) { const positionStrategy = this.overlay.position() .global() .centerHorizontally() .centerVertically(); const overlayRef = this.overlay.create({ hasBackdrop: true, positionStrategy, }); overlayRef.attach(this.templatePortal); } }); } }
代码说明: