Core: Unsubscription from onLangChange throws error

Created on 11 Nov 2016  路  3Comments  路  Source: ngx-translate/core

[x ] bug report => check the FAQ and search github for a similar issue or PR before submitting

Hy guys I'm using ng2-translate in our project. Currently I have a problem with the subscribe/unsubscribe process.

Current behavior
We have a table component which is reused on various "pages" of the application. I have to subscribe to the onLangChange-Event due to rerender parts of the component (ng2 datatable) to translate also the header of the table. In the constructor the component is subscribing to the onLangChange event. In the onDestroy I want to unsubscribe from it again. It works perfectly when I dont unsubcribe, but I'm not sure if this will cause errors if the component is rendered several times during the application lifetime?

But when I unsubscribe in the onDestroy of the component the following erro is thrown when the component is used the next time:

index.js:56623 EXCEPTION: Uncaught (in promise): Error: Error in ./ClientsListPage class ClientsListPage - inline template:3:12 caused by: object unsubscribed

Here is a snippet of the code

    constructor(
    public translate: TranslateService
) {
    // subscribe to lang service in case language is changed
    this.translate.onLangChange.subscribe((lang) => {
        console.log('lang');
        this._initDataTableColumns();
    });
}

ngOnInit() {
    this._initDataTableColumns();
}

ngOnDestroy(){
    this.translate.onLangChange.unsubscribe();
}

Any idea on that issue? Of course I just could neglect the unsubscribe process, but I dont know if this is causing other issues later on?

Please tell us about your environment:

  • ng2-translate version: 2.5.0

  • Angular version: 2.1;0

  • Browser: [all]

  • Language: [all]

Most helpful comment

I think what you really want is this.

private subscription: Subscription<any>;

constructor(
    public translate: TranslateService
) {
    // subscribe to lang service in case language is changed
    this.subscription = this.translate.onLangChange.subscribe((lang) => {
        console.log('lang');
        this._initDataTableColumns();
    });
}

ngOnInit() {
    this._initDataTableColumns();
}

ngOnDestroy(){
    this.subscription.unsubscribe();
}

All 3 comments

I think what you really want is this.

private subscription: Subscription<any>;

constructor(
    public translate: TranslateService
) {
    // subscribe to lang service in case language is changed
    this.subscription = this.translate.onLangChange.subscribe((lang) => {
        console.log('lang');
        this._initDataTableColumns();
    });
}

ngOnInit() {
    this._initDataTableColumns();
}

ngOnDestroy(){
    this.subscription.unsubscribe();
}

@SamVerschueren

aaah big thx, this is usually what I do, but in that case I tought I could directly unsub from the translation service. now it is working :)

@SamVerschueren

many thanks..
same issue .. same question .. and you help again :)

Was this page helpful?
0 / 5 - 0 ratings

Related issues

apreg picture apreg  路  3Comments

webprofusion-chrisc picture webprofusion-chrisc  路  4Comments

rbaumi picture rbaumi  路  4Comments

jstoup111 picture jstoup111  路  4Comments

jvquarck picture jvquarck  路  3Comments