Как правильно отображать полученный от сервера HTML в Angular 4/5?

Question

[beta-it]

Здравствуйте.

Есть веб приложение получающее от сервера объект вида:

{
id: number;
content: string;
}

где поле content - html текст.

Собственно вопрос в том как этот полученный контент правильно добавлять в шаблон?
На данный момент использую такой подход:
<div [innerHTML] = "html.content"></div>

Answer 1

[Евгений Калибров]

Вы используете правильный подход, деректива - [innerHTML]

Comments

[beta-it]

Я просто не так давно решил посмотреть исходники сайта angular.io, в общем и целом там реализовано совершенно по другому:
Ссылка на репозиторий

[Евгений Калибров]

beta-it, как?

[beta-it]

Евгений Калибров,

/**
   * Add doc content to host element and build it out with embedded components.
   */
  protected render(doc: DocumentContents): Observable<void> {

    console.log(doc);

    let addTitleAndToc: () => void;

    return this.void$
        // Security: `doc.contents` is always authored by the documentation team
        //           and is considered to be safe.
        .do(() => this.nextViewContainer.innerHTML = doc.contents || '')
        .do(() => addTitleAndToc = this.prepareTitleAndToc(this.nextViewContainer, doc.id))
        .switchMap(() => this.embedComponentsService.embedInto(this.nextViewContainer))
        .do(() => this.docReady.emit())
        .do(() => this.destroyEmbeddedComponents())
        .do(componentRefs => this.embeddedComponentRefs = componentRefs)
        .switchMap(() => this.swapViews(addTitleAndToc))
        .do(() => this.docRendered.emit())
        .catch(err => {
          const errorMessage = (err instanceof Error) ? err.stack : err;
          this.logger.error(`[DocViewer] Error preparing document '${doc.id}': ${errorMessage}`);
          this.nextViewContainer.innerHTML = '';
          return this.void$;
        });
  }

и в сервисе:

/**
   * Embed components into the specified element:
   * - Load the necessary modules (if any).
   * - Prepare the component factories.
   * - Instantiate the components.
   *
   * Return the list of `ComponentRef`s.
   */
  embedInto(elem: HTMLElement): Observable<ComponentRef<any>[]> {
    const requiredComponents = Object.keys(this.embeddedComponentsMap)
        .filter(selector => elem.querySelector(selector))
        .map(selector => this.embeddedComponentsMap[selector]);

    const factoriesReady = requiredComponents.map(compsOrPath => this.prepareComponentFactories(compsOrPath));

    return !requiredComponents.length
        ? of([])
        : of(undefined)
              .switchMap(() => Promise.all(factoriesReady))
              .switchMap(() => [this.createComponents(elem)]);
  }

Это всего лишь часть используемого кода для своего рода отображения входящего HTML контента.

Answer 2

[Александр Семенов]

Dynamic content viewer