Как получить загруженные данные контента из корневого элемента? Angular2

После нескольких часов поиска в Google мне не удалось найти решение.

Я хочу добавить функцию публикации в статью. Что-то вроде шорткода WordPress. Итак, есть контент с Feature content внутри. Статья может иметь несколько функций.

Теперь я понимаю, что должен быть корневой элемент. И здесь возникает проблема. Когда я помещаю статью в компонент , содержимое перезаписывается шаблоном компонента.

Я знаю, что есть , но это работает только внутри корневого компонента.

Я хочу, чтобы содержимое статьи загружалось вместе со страницей, чтобы поисковые системы могли видеть содержимое, даже если не запущен JavaScript. Поэтому я не хочу загружать контент с помощью REST API.

Как бы вы справились с этим? Как мне прочитать оригинальную статью, а затем как поместить ее внутрь углового корневого элемента?

Спасибо вам за ваши предложения!

Источник

2 ответа

Решение

Я нашел небольшой взлом, но он может работать не во всех ситуациях.

 @Component({
  selector: 'blog-app',
  template: document.getElementsByTagName('blog-app')[0].innerHTML

})

export class BlogAppComponent {

}
Источник

Что делать, если вы положите <ng-content></ng-content> тег в шаблоне компонента? Следует сохранить - он же "проект" - оригинальный контент, нет?

ДО Угловой компиляции (это сырье index.html возвращается сервером):

<body>
  <my-app>
    <p>Some article content</p>
  </my-app>
</body>

ПОСЛЕ Angular-компиляции (это страница ПОСЛЕ того, как она была скомпилирована Angular в браузере клиента; эта часть не была бы выполнена, если бы JavaScript был отключен в браузере клиента):

<body>
  <my-app>

    <!-- Some elements coming from the component's template, e.g. nav... -->

    <!-- The NG-CONTENT tag should be replaced by the original content: -->
    <p>Some article content</p>

    <!-- More elements coming from the component's template, e.g. footer... -->

  </my-app>
</body>

Компонент для my-app будет выглядеть примерно так:

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

@Component({
  selector: 'my-app',
  template: `
    <!-- navbar elements -->

    <ng-content></ng-content>

    <!-- footer elements -->
  `,
})
export class AppComponent  {}
Источник
Другие вопросы по тегам