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

Question

[webivan1]

Есть некая страница, получает json с сервера в виде:

{
  h1: "Страница",
  seotext: "<p>Привет мир! <a href='/' [routerLink]=\"['MainPage']\">Я ссылка</a></p>"
}

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

Само собой ссылка

<a href="/" [routerLink]="['MainPage']">Я ссылка</a>

не работает через angular2.

Как заставить ангуляр взглянуть на html и скушать свои директивы заново?

Comments

[Alex]

Там Алексей все правильно написал. И забудьте вы про манипуляции с DOM вручную. и никакие jquery не нужны... Есть ng-view есть директивы

Answer 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