Question

所以，我有一个有角度的应用程序并使用md-dialog进行模态目的。一切正常但在尝试打开辅助路径时会抛出错误的服务器端渲染。我试过了AfterViewInit，但它没有用。我认为它必须打开路由配置中定义的组件，然后在dialog.open()方法中执行ngAfterViewInit方法。

这是相关路线配置：

{
  path: 'postm/:postId',
  component: PostIndexModalComponent,   
  outlet:'post'
},

这是打开md-dialog

的PostIndexModalComponent

export class PostIndexModalComponent implements OnInit,OnDestroy,AfterViewInit{

post: any
isAuthorizedSubscription: Subscription;
isAuthorized: boolean;
postId: number;
urlSub: any;

constructor(public dialog: MdDialog,public router:Router,public activatedRoute:ActivatedRoute) { }
ngOnInit() {
    this.urlSub = this.activatedRoute.params.subscribe(params => {
        this.postId = params['postId'];            
    });

}
ngOnDestroy() {


}
ngAfterViewInit() {
    this.openModal();
}

openModal() {
    console.log(this.postId);
    let dialogRef = this.dialog.open(PostModalComponent, {
        height: '100%',
        width: '100%',
        panelClass:'da',
        data: {
            postId:this.postId
        }
    });
    dialogRef.afterClosed().subscribe(f => {
        this.router.navigate([{ outlets: { post: null } }]);
    });

}

closeModal($event) {
    this.router.navigate([{ outlets: { post: null } }]);
}
}

Auxulary路由在客户端很好地工作，但是，服务器端渲染会产生错误：

NodeInvocationException：Uncaught（在promise中）：ReferenceError：未定义文档 ReferenceError：未定义文档在Overlay._createPaneElement（C：\ Users \ doom \ Desktop \ emergency \ fso.Web \ fso.AngularClient \ ClientApp \ dist \ main-server.js：11465：46）在Overlay.create（C：\ Users \ doom \ Desktop \ emergency \ fso.Web \ fso.AngularClient \ ClientApp \ dist \ main-server.js：11450：44）在MdDialog._createOverlay（C：\ Users \ doom \ Desktop \ emergency \ fso.Web \ fso.AngularClient \ ClientApp \ dist \ main-server.js：26492：30）在MdDialog.open（C：\ Users \ doom \ Desktop \ emergency \ fso.Web \ fso.AngularClient \ ClientApp \ dist \ main-server.js：26460：48）在PostIndexModalComponent.openModal（C：\ Users \ doom \ Desktop \ emergency \ fso.Web \ fso.AngularClient \ ClientApp \ dist \ main-server.js：65986：37）在PostIndexModalComponent.ngAfterViewInit（C：\ Users \ doom \ Desktop \ emergency \ fso.Web \ fso.AngularClient \ ClientApp \ dist \ main-server.js：65981：14） at callProviderLifecycles（C：\ Users \ doom \ Desktop \ emergency \ fso.Web \ fso.AngularClient \ ClientApp \ dist \ vendor.js：22011：18） at callElementProvidersLifecycles（C：\ Users \ doom \ Desktop \ emergency \ fso.Web \ fso.AngularClient \ ClientApp \ dist \ vendor.js：21986：13） at callLifecycleHooksChildrenFirst（C：\ Users \ doom \ Desktop \ emergency \ fso.Web \ fso.AngularClient \ ClientApp \ dist \ vendor.js：21970：17） at Object.checkAndUpdateView（C：\ Users \ doom \ Desktop \ emergency \ fso.Web \ fso.AngularClient \ ClientApp \ dist \ vendor.js：23002：5）错误：未捕获（在承诺中）：ReferenceError：未定义文档

带组件的Angular 4辅助路径打开md-dialog会在服务器端渲染错误

0 个答案: