如何使用常量在angular 7中编写的UI中显示标签

Question

我想在我的页面上显示一些常量/属性/json文件中的标签。有人能建议一下如何在angular 7中实现这一点吗？

这样做的目的是，当用户想要更改html中的标签之一的文本时，而不是在html文件中更改它，我应该能够在常量/json/properties文件中进行更改，同样的更改将反映在所有适用的html页面中。例如，{{ lblManage }}，在其他一些文件中，lblManage=管理任务。

Answer 1

Angular自动提供环境常量文件

/YourApp/src/environment/environment.ts ->用于非prod，比如简单地使用ng serve。

和

/YourApp/src/environments/environments/prod.ts用于prod的->，使用ng build --prod

例如，environment.ts

export const environment = {  
 production: false,
 apiUrl: 'http://example.com/api'
};

您可以简单地在其中添加属性，并在以后的代码中使用它们，如下所示：

import { environment } from './environment';
...
apiURL = environment.apiUrl;

Answer 2

你可以这样读你的json文件：

import { HttpClient } from '@angular/common/http'; 
import { Observable } from 'rxjs';

@Injectable()
export class readJSONService{

   constructor(private http: HttpClient) {
        this.readJSON().subscribe(data => {
            console.log(data);
        });
    }

    public readJSON(): Observable<any> {
        return this.http.get("./assets/constants/properties/json");
    }
}

然后像这样使用创建的服务。

   label: any;

   constructor(private readJSONService: readJSONService) {
      this.label = this.fetchConstant(lblMAnage);

}

   fetchConstant(lblMAnage){
       this.readJSONService.readJSON().subscribe((yourLabel)=> {
            console.log(yourLabel);
            this.label = yourLabel.lblMAnage;
        });
   }

Answer 3

如果您想在我的页面上显示一些常量/属性/json文件中的标签，那么只需使用环境文件夹下的环境文件，或者如果首选使用internatinalization，则使用i18n。

然后在组件中导入使用，例如，如果我们使用第一种方法，

import { environment } from './environment';

并以如下方式访问它

environment.constant_name