@webivan1

Как в Angular2 инициализировать router?

Добрый день!
Есть некая страница, получает json с сервера ввиде:
{
  h1: "Страница",
  seotext: "<p>Привет мир! <a href='/' [routerLink]=\"['MainPage']\">Я ссылка</a></p>"
}


Получаю json и вывожу данные на страницу через [innerHtml]

Само собой ссылка
<a href="/" [routerLink]="['MainPage']">Я ссылка</a>
не работает через angular2 как заставить ангуляр взглянуть на html и скушать свои директивы заново?
  • Вопрос задан
  • 456 просмотров
Решения вопроса 1
Update
Обновленная версия здесь Angular 2 как задать template динамически?

Вы можете попробовать сделать директиву-обертку, которая будет динамически подгружать компонент с шаблоном из вашего html.
html-outlet.ts
import {
  Component,
  Directive,
  Input,
  ComponentFactory,
  ComponentMetadata,
  ComponentResolver,
  ReflectiveInjector,
  ViewContainerRef
} from '@angular/core';

function createComponentFactory(resolver: ComponentResolver, 
           metadata: ComponentMetadata): Promise<ComponentFactory<any>> {
  const cmp = class DynamicComponent { };
  const decoratedCmp = Component(metadata)(cmp);
  
  return resolver.resolveComponent(decoratedCmp);
}

@Directive({
  selector: 'html-outlet'
})
export class HtmlOutlet {
  @Input() html: string;

  constructor(private vcRef: ViewContainerRef, private resolver: ComponentResolver) {}

  ngOnChanges() {
    if (!this.html) return;

    const metadata = new ComponentMetadata({
      selector: 'dynamic-html',
      template: this.html,
    });

    createComponentFactory(this.resolver, metadata)
      .then(factory => {
        const inj = ReflectiveInjector.fromResolvedProviders([], this.vcRef.parentInjector);
        this.vcRef.createComponent(factory, 0, inj, []);
      });
  }
}

И потом в нужном месте используете эту директиву:

<html-outlet [html]="html"></html-outlet>

Полный пример можете посмотреть на plunkr
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@webivan1 Автор вопроса
Очень здорово, спасибо!
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы