Angular 2让它等待服务初始化

发布时间：2020-12-17 17:17:33 所属栏目：安全来源：网络整理

导读：我有一个管道解析消息密钥并相应地返回消息到区域设置. 但我想要有角度等待,直到我的服务将完成它的加载消息,并且只有在继续呈现主页面之后.我的本地化管道使用的地方. 如何让它工作？服务： @Injectable()export class I18nService implements OnInit { pr

我有一个管道解析消息密钥并相应地返回消息到区域设置.

但我想要有角度等待,直到我的服务将完成它的加载消息,并且只有在继续呈现主页面之后.我的本地化管道使用的地方.
如何让它工作？

服务：

@Injectable()
export class I18nService implements OnInit {

    private cachedMessages: {string: string};

    activeLocale:I18Enum = null;

    constructor(private http: Http) {
        this.reloadLocale(I18Enum.ru);
    }

    ngOnInit(): void {
        this.reloadLocale(I18Enum.ru);
    }

    getMessage(key: string) {
        if (this.cachedMessages) {
            return this.cachedMessages[key];
        }
    }

    reloadLocale(locale: I18Enum) {
        this.activeLocale = locale;
        this.http.get(basePath + i18nPath + I18Enum[locale]).subscribe(
            res => {
                this.cachedMessages = res.json();
            }
        );
    }
}

和管道：

@Pipe({name: 'i18nPipe'})
export class I18nPipe implements PipeTransform {

    constructor(private i18Service: I18nService) {
    }

    transform(value: any,args: any): any {
        return this.i18Service.getMessage(value);
    }

}

解决方法

好.最后我做到了.我找到了这个答案,它帮助了我.
https://stackoverflow.com/a/40379803/5203127

所以我的代码现在看起来如下：

服务:(添加了一个initMessages方法)

@Injectable()
export class I18nService {

    private cachedMessages: {string: string} = null;

    activeLocale: I18Enum = null;

    constructor(private http: Http) {

    }

    getMessage(key: string) {
        if (this.cachedMessages) {
            return this.cachedMessages[key];
        }
    }

    reloadLocale(locale: I18Enum) {
        this.activeLocale = locale;
        this.http.get(basePath + i18nPath + I18Enum[locale]).subscribe(
            res => {
                this.cachedMessages = res.json();
            }
        );
    }

    initMessages(locale: I18Enum) {
        this.activeLocale = locale;

        return new Promise((resolve,reject) => {
            this.http.get(basePath + i18nPath + I18Enum[locale]).map(res => res.json()).catch((error: any): any => {
                reject(false);
                return Observable.throw(error.json().error || 'Server error');
            }).subscribe((callResult: {string: string}) => {
                this.cachedMessages = callResult;
                resolve(true);
            });

        });
    }
}

我的bootstrap :(添加了APP_INITIALIZER提供者)

@NgModule({
        imports: [...,HttpModule,...],declarations: [...,I18nPipe
        ],bootstrap: [AppComponent],providers: [...,I18nService,{
                provide: APP_INITIALIZER,// useFactory: (i18NService: I18nService) => () => i18NService.initMessages(I18Enum.ru),// or
            useFactory: initApp,deps: [I18nService],multi: true
        }
    ]
})
export class TopJavaModule {

}

export function initApp(i18nService: I18nService){
    // Do initing of services that is required before app loads
    // NOTE: this factory needs to return a function (that then returns a promise)
    return () => i18nService.initMessages(I18Enum.ru);  // + any other services...
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!