ngOnInit 不在错误页面组件上运行

Posted 2023-03-13

【中文标题】ngOnInit 不在错误页面组件上运行

【英文标题】：ngOnInit does not run on error page component

【发布时间】：2018-02-27 00:21:38

【问题描述】：

Angular 4 应用程序。

我正在尝试创建一个错误页面，以显示有关可能发生的未处理异常的一些信息。 GlobalErrorHandler 拦截最终错误并将用户重定向到由单个 ErrorComponent 组成的页面。发生错误时会显示页面，但不会调用生命周期挂钩。

错误处理程序：

@Injectable()
export class GlobalErrorHandler extends ErrorHandler 

    constructor(
        private injector: Injector
    ) 
        // The true paramter tells Angular to rethrow exceptions, so operations like 'bootstrap' will result in an error
        // when an error happens. If we do not rethrow, bootstrap will always succeed.
        super(true);
    

    handleError(error: any) 
        const router = this.injector.get(Router);

        if (!router.url.startsWith('/error')) 
            router.navigate(['/error']);
        

        super.handleError(error); 
    

错误组件：

@Component(
    selector: 'error-desc',
    template: '<h1>Error page = code</h1>'
    changeDetection: ChangeDetectionStrategy.OnPush
)
export class ErrorComponent implements OnInit 
    public code: string = '';

    constructor(
    ) 

    ngOnInit() 
        // not called
        this.code="AAAA";
        console.log("OnInit");
    

    ngOnDestroy() 
        console.log("OnDestroy");
    

plunkr 上的工作演示。

我该如何解决这个问题？也许有人知道解决方法？ 谢谢

【问题讨论】：

请输入您的代码

代码在planker中。见描述中的链接

@Albert 我从 4.1 升级到 4.4 后遇到了同样的问题。顺便说一句，您应该在问题中包含代码，而不是外部网站，请参阅 How to ask a good question ：“如果可以创建可以链接到的问题的实时示例（例如，在 sqlfiddle.com 或jsbin.com) 然后这样做 - 但也要在您的问题本身中包含代码。不是每个人都可以访问外部网站，并且链接可能会随着时间的推移而中断。"

有一个 issue 关于这个问题。

@n00dl3，你是对的，这是我对相关代码的疏忽。以后我会更加注意。谢谢

【参考方案1】：

找到this github issue后。看来您只需在 angular 区域内运行 router.navigate(...) 代码即可启动并运行重定向：

错误处理程序：

@Injectable()
export class GlobalErrorHandler extends ErrorHandler 

    constructor(private injector: Injector private zone: NgZone) 
        super();
    

    handleError(error: any) 
        const router = this.injector.get(Router);
        super.handleError(error);
        if (!router.url.startsWith('/error')) 
            this.zone.run(()=>router.navigate(['/error']));
        
    

【讨论】：

有趣，handleError 方法在 zone 之外运行

我在收到来自PayPal Checkout 的付款并将用户重定向到成功页面时遇到了同样的问题...无论如何，在 angular 的NgZone 内运行router 解决了我的问题...谢谢！