Как перевести строку угловой интерполяции из компонента контейнера - PullRequest
Новая
       34

Как перевести строку угловой интерполяции из компонента контейнера

1 голос
/ 10 июля 2019

I all;)

Я новичок в angular и хочу использовать i18n от angular.Но когда я хочу перевести текст из углового класса с использованием интерполяции {{}}, я не знаю, как это сделать.

У меня есть панель инструментов компонента, эта панель инструментов содержит заголовок, который изменяется, когдасобытие происходитэто событие содержит заголовок для отображения.Но как я могу перевести этот заголовок с i18n?

Я попытался с помощью select: {title, select, title1 {мой заголовок 1} title2 {мой заголовок 2} title3 {мой заголовок 3}} Но я думаю, что это не лучшее решение

Класс компонента: 

@Component({
  selector: 'toolbar',
  templateUrl: './toolbar.component.html',
  styles: []
})
export class StartComponent implements OnInit {
  public title : string;

  constructor(private communicate: CommunicateService) {
  }

  ngOnInit() {
      this.subscription = this.communicate.getTitle().subscribe(
              title => this.title = title,
              (err: any) => console.error(err)
          );
  }
}

Шаблон HTML: 

<div class="toolbar">{{title}}</div>

Итак, мой вопрос ... Как я могу перевести заголовок?Я думаю, что есть и другая проблема, подобная этой, поэтому мы ценим все советы.

Заранее спасибо за помощь:)

Ответы [ 2 ]

1 голос
/ 10 июля 2019

Вы можете использовать интерполяции и HTML-разметку внутри вашего переводы.

См. Документацию .

Таким образом, простой тег i18n, такой как <div class="toolbar" i18n>Welcome to {{companyName}}!</div>, должен это делать.

В отрендеренном файле .xlf, который будет выглядеть примерно так: 

<trans-unit id="91073dbc0b03be401d8c83b8e9c1513c3fa87b14" datatype="html">
  <source>Welcome to <x id="INTERPOLATION" equiv-text="{{ companyName }}"/>!</source>
    <context-group purpose="location">
    <context context-type="sourcefile">app/login/welcome-screen/welcome-screen.template.html</context>
    <context context-type="linenumber">1</context>
  </context-group>
</trans-unit>

Надеюсь, что ответит на ваш вопрос:)

Редактировать на основе комментариев ниже:

Чтобы решить вашу конкретную проблему, вы можете написать свой start.template.html как: 

<div style="display: none">
   <span #firstTitle i18n>First title</span>
   <span #secondTitle i18n>Second title</span>
   <span #thirdTitle i18n>Third title</span>
</div>
<div>{{ title }}</div>

Писать скрытые элементы с помощью тегов i18n - это обычный обходной путь, поскольку вы не можете переводить внутри компонентов или служб прямо сейчас. (для получения дополнительной информации см. сообщение )

В файле start.component.ts вы можете подписаться на изменения маршрутизатора и установить соответствующий заголовок, например: 

@Component({
  selector: 'toolbar',
  templateUrl: './toolbar.component.html',
  styles: []
})
export class StartComponent implements OnInit {
  public title : string;
  @ViewChild('firstTitle') firstTitle: ElementRef<HTMLSpanElement>;
  @ViewChild('secondTitle') secondTitle: ElementRef<HTMLSpanElement>;
  @ViewChild('thirdTitle') thirdTitle: ElementRef<HTMLSpanElement>;

  constructor(private router: Router) {}

  ngOnInit() {
     this.router.events.subscribe((event) => {
       if(event.url) {
         setTitleByUrl(event.url);
       }
     });
   }

   private setTitleByUrl(url: string) {
     if (url === 'firstUrl') {
        title = this.firstTitle.nativeElement.textContent;
     } else if (url === 'secondUrl') {
        title = this.secondTitle.nativeElement.textContent;
     } else if (url === 'thirdUrl') {
        title = this.thirdTitle.nativeElement.textContent;
     }
   }
}

Здесь вы подписываетесь на Angular router (подробнее смотрите здесь ) и устанавливаете заголовок.

0 голосов
/ 10 июля 2019

Если вы хотите использовать более одного языка и переключаться между языками во время выполнения, я рекомендую взглянуть на NGX Translate

...