Question

我正在运行角度4.2.4应用程序，使用 ngx-translate 进行多语言功能。虽然静态文本的翻译工作正常，但我也需要从api获取一些数据。

api url看起来像： http://apiurl.com/endpoint/gb（其中gb是我提取的语言）一旦我更改页面，我就设法实现了更新语言，但这还不够。

当我在不更改页面/页面刷新的情况下更改语言时，有什么方法可以强制刷新所有可见的可观察量？

我的代码（简化）如下：

ApiService.ts

@Injectable()
export class ApiService {
  baseUrl: 'http://apicall/fake/';
  lang = 'gb';
  constructor(public http: HttpClient) { }

  getGallery() {
    return this.http.get(this.baseUrl + 'gallery/' + this.lang);
  }

  changeLang(lang) {
    this.lang = lang;
    //some additional logic here for ngx-translate and such
  }
}

Page.ts

@Component({
  selector: 'app-page',
  templateUrl: './page.html'
})
export class AppPage {
  data;
  constructor(public api: ApiService) {
    this.api.getGallery().subscribe(data => this.data);
  }

  changeLang() {
    //change between several languages
    this.api.changeLang(lang);
  }
}

page.html中

<h1>{{'TITLE' | translate}}</h1>
<p>{{data}}</p>
<button (click)="api.changeLang()></button>

当我点击按钮时，只有h1更新（使用ngx-translate）并且p元素不会更新，直到我更改页面并返回。我想要的是当我点击按钮时更新p。

如何手动无效/刷新observable？

0 个答案: