Как связать innerHTML с переводом - PullRequest
Новая
       6

Как связать innerHTML с переводом

0 голосов
/ 25 февраля 2019

Привет, у меня проблема с привязкой к свойству, чтобы получить html и перевести его из json: [innerHTML] = "article. {{ArticleId}}. Description | translate".

"articles": [
    {
        "id": 1, 
        "title": "Title phone", 
        "description": "<p>some text</p>",
        "img": "article-1.png",
        "alt": "Phone"
    },
    {
        "id": 2, 
        "title": "this is title", 
        "description": "<p>Some text</p>
        "img": "article-2.jpg",
        "alt": "MacBook"
    }
]

Ответы [ 2 ]

0 голосов
/ 25 февраля 2019

Вы можете использовать функцию компонента, которая получает правильную статью от вас.Проблема в том, что эта функция будет вызываться с DoCheck, что может быть не очень производительным.Другой вариант - создать канал многократного использования, в котором вы можете преобразовать элементы статьи в объект id -> article: 

@Pipe({
  name: 'keyObjects'
})
export class KeyObjectsPipe<T = any> implements PipeTransform {

  transform(objects: T[], key: keyof T): {[key: string]: T}[] {
    return (objects || []).map((object) => ({[object[key]]: object }));
  } 
}

Поскольку это чистый канал, он не будет вызываться при каждом DoCheck, и вы можете повторно использовать эту логику для любых других объектов, которые могут иметь это.Использование будет: 

<div [innerHTML]="(articles | keyObjects:'id')[articleId]?.description | translate"></div>

Другой, и, возможно, даже лучший вариант, это создать Observable, который содержит поток articleId.Затем вы можете отобразить это вместе с потоком articles, чтобы получить нужный объект: 

//pseudo
articles$: Observable<Article[]> = this.http.get('/articles'); 

// if you have :article as route param
articleId$ = this.route.params.pipe(map(({ article }) => article));

// get the right article
article$ = combineLatest(
  this.articles$,
  this.articleId$
).pipe(
  map(([ articles, articleId ]) => articles.find((article) => article.id === articleId)),
  shareReplay(1)
);

Затем вы можете использовать это с async pipe: 

<div [innerHTML]="(article$ | async)?.description | translate"></div>
0 голосов
/ 25 февраля 2019

Чтобы отобразить все статьи, вы можете использовать следующее cpde 

<div *ngFor="let article of articles">
  <div [innerHTML]="article.description | translate"></div>
</div>

Или для отображения конкретной статьи используйте следующий код 

<div [innerHTML]="articles[articleId].description | translate"></div>
...