Question

navbar.component.html

<div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto">
            <li routerLinkActive="active" *ngFor="let menuItem of menuItems" class="{{menuItem.class}} nav-item">
                <a [routerLink]="[menuItem.path]" class="nav-link">{{menuItem.title}}</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="" data-toggle="modal" data-target="#myModal" (click)="showModal()"><i class="icon-search"></i></a>
            </li>
        </ul>
    </div>

navbar.comomponent.ts

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

import {TranslateService} from '@ngx-translate/core';

declare interface RouteInfo {
    path: string;
    title: string;
    class: string;
}
export const ROUTES: RouteInfo[] = [
    { path: '/home', title: 'Home', class: '' },
    { path: '/buyer_registration', title: 'Buyer Registration',  class: '' },
    { path: '/rate_contract', title: 'Rate Contract', class: '' },
    { path: '/login', title: 'Login', class: '' },
];

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})

export class NavbarComponent implements OnInit {
  menuItems: any[];

  constructor(translate: TranslateService) {
    translate.setDefaultLang('English');
    translate.use('English');
  }

  ngOnInit() {
    this.menuItems = ROUTES.filter(menuItem => menuItem);
  }
}

如何转换本地JSON数据？
我本地已经有一个en和fr JSON文件

Answer 1

使用ngx-translate，您可以做到这一点。您将在这里找到分步介绍：

ngx-translate Documentation

您还应该查看此链接：

How to ask a question on stackoverflow

您没有提供足够的代码来复制问题（例如缺少app.module.ts）
未创建实时示例
标题：主题范围太广

Answer 2

我也遇到了这个问题。

我最后做的是使用ngx-translate。易于使用！

Here is working example.

如何转换本地json数据

2 个答案: