Итак, я использую угловой материал, и у меня есть спиннер, который работает плавно.
Но теперь у меня также есть переводы с i18. И я хочу, чтобы помимо каждого http-запроса имелся спиннер, а также показывалось конкретное сообщение под спиннером.
Итак, у меня есть loaderServce:
@Injectable({
providedIn: 'root'
})
export class LoaderService {
loaderState = new Subject<boolean>();
constructor() {}
show() {
this.loaderState.next(true);
}
hide() {
this.loaderState.next(false);
}
}
и перехватчик:
export class LoaderInterceptorService implements HttpInterceptor {
constructor(private loaderService: LoaderService) { }
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
this.showLoader();
return next.handle(req).pipe(tap((event: HttpEvent<any>) => {
if (event instanceof HttpResponse) {
this.onEnd();
}
},
(err: any) => {
this.onEnd();
}));
}
private onEnd(): void {
this.hideLoader();
}
private showLoader(): void {
this.loaderService.show();
}
private hideLoader(): void {
this.loaderService.hide();
}
}
, а затем фактический компонент, в котором будет показан счетчик:
<app-loader></app-loader>
<button mat-raised-button color="accent" (click)="saveAndPublish()" [disabled]="form.invalid">Save & Publish</button>
<button mat-raised-button color="primary" (click)="save()" [disabled]="form.invalid">Save</button>
<form [formGroup]="form" >
<app-node-tree-input formControlName="nodes"></app-node-tree-input>
</form>
и ts код:
save() {
const model = this.getSubmitModel();
if (model) {
this.schemaTemplateService.createVersion(model.name, model)
.subscribe((schema) => {
this.i18n('Saving & Publishing...');
console.log('schema', schema);
// TODO feedback
});
}
}
Но сообщение не показывается таким образом.
Поэтому мой вопрос: как показать переведенное сообщение?
Спасибо
, поэтому, если я сделаю это:
save() {
const model = this.getSubmitModel();
if (model) {
this.schemaTemplateService.createVersion(model.name, model)
.subscribe((schema) => {
console.log(this.i18n('Saving & Publishing...'));
console.log('schema', schema);
// TODO feedback
});
}
}
Я вижу сообщение консоли:
console.log(this.i18n('Saving & Publishing...'));
, но оно не отображается в шаблоне (html)