Question

需要有关Angular 2的帮助以及如何在组件中重新加载组件。

所以我有一个包含翻译下拉菜单的NavbarComponent。所有翻译都是i18n json格式。当我选择一种语言时，翻译正确。我的项目结构如下

app
|-----Categories
      |-----categories.component/module/routing/service/html
|-----Users
      |-----users.component/module/routing/service/html
|-----navbar.component/html
|-----app.component/module/routing

我不会列出完整的结构，但如果你需要它，我可以把它完整。

现在，就像我说的所有静态翻译都很好。我有一个类别的部分，连接到python api，并以json格式检索数据，这将根据所选语言返回数据。

我需要的是，当语言从NavbarComponent的下拉列表中更改时，在翻译页面时，它还会从python api中请求一组新的数据并选择语言并将其加载到容器中（不刷新页面。）

到目前为止，我可以发出请求，但我可以发出请求，但我不知道如何推送CategoriesComponent中的数据来更新HTML。代码如下。

navbar.component.ts

import { Component, OnInit } from '@angular/core';
import {TranslateService} from 'ng2-translate';
import {CategoriesService} from "./categories/categories.service";
import {Subscription} from "rxjs";
import {CategoriesComponent} from "./categories/categories.component";

@Component({
    selector: 'navbar',
    templateUrl: 'app/navbar.component.html',
    directives: [CategoriesComponent]
})
export class NavBarComponent implements OnInit {
    categories: any[];
    busy: Subscription;
    private url: string;
    public supportLanguages: any[];
    myCall: string;
    constructor(private translate: TranslateService, public     categoriesService: CategoriesService) {
    }

    ngOnInit (){
        this.supportLanguages = [ {'display':'English', 'value': 'en'},
                              {'display':'Français', 'value':'fr'},
                              {'display':'中文', 'value':'zh'},
                              {'display':'Español', 'value':'es'} ];

        this.translate.setDefaultLang('en');
        this.translate.use(this.translate.getDefaultLang());
    }

    isCurrentLang(lang: string) {
    return lang === this.translate.currentLang;
    }

    setLang(lang: string){
        this.myCall = "Hello World";
        this.translate.setDefaultLang(lang);
        this.translate.use(this.translate.getDefaultLang());
        this.url = "http://localhost:8000/category/type/list?lang_id=" + this.translate.getDefaultLang();
        this.busy =     this.categoriesService.getCategoriesType(this.url).subscribe(categories =>     this.categories = categories);
    }
}

categories.component.ts

import { Component, OnInit } from '@angular/core';

import { CategoriesService } from './categories.service';
import {TranslateService} from "ng2-translate";
import {Subscription} from "rxjs";


@Component({
    templateUrl: 'app/categories/categories.component.html'
})
export class CategoriesComponent implements OnInit {
    categories: any[];
    busy: Subscription;
    myCall: string;
    private url: string;

    constructor(private _categoriesService: CategoriesService, private translate: TranslateService){
        this.translate.use(this.translate.getDefaultLang());
    }

    ngOnInit(){
        this.url = "http://localhost:8000/category/type/list?lang_id=" + this.translate.getDefaultLang();
        console.log(this.url);
        this.busy = this._categoriesService.getCategoriesType(this.url).subscribe(categories => this.categories = categories);
        this.translate.use(this.translate.getDefaultLang());
    }
}

我希望有人可以帮忙解决这个问题。

感谢。

Answer 1

我考虑写一个语言服务＆＃39;每个组件都可以订阅语言更新（例如使用rxjs Subject）。将此服务注入＆＃39; NavbarComponent＆＃39;和＆＃39; CategoriesComponent＆＃39;，订阅更改并重新加载您的数据。

Answer 2

就像托马斯所说，你可以提供一个翻译服务，分别处理所有的翻译。

另一个有趣的想法是制作一个管道，并在该管道中用数据命中你的python api。唯一的主要限制是您必须限制请求。例如：

{{ stringToTranslate | translate:'spanish'}}

如果您不确定，可以检查角度2文档以了解如何创建/使用管道。

Angular 2 - 重新加载组件onChange

2 个答案: