Angular2 routing: How to use [routerLink] in the <div [innerHTML] element? IE related to innerHTML

Question

So, I am creating a static angular2 site template, with the main pages being written to markup files.

I need to have working links written in markdowns without refreshing the page.

An example page could be:

@Component({
    selector: 'sample-page',
    providers: [],
    template: `
    <div innerHtml="{{text | markdown}}"></div>    
    `,
    styleUrls: [],
    directives: [ROUTER_DIRECTIVES],
    pipes: [MarkdownPipe]
})
export class SamplePageComponent {...

And the markdown file may contain

/**
* Insert your markdown between the ticks
*/
export let page_markdown: string = `
## a sample page
[back to home 1](/)
<div>
<a [routerLink]="['Home']">Back to home 2</a>
</div>
`
    ;

But for some reason, Back to home 2 is not displayed, because angular2 does not start snapping to anything inside <div [innerHTML].

The standard markdown [back to home 1](/)just reloads the page, which I don't want.

Is there any way around my problem?

Thanks in advance.

Answer 1

. HTML, [innerHtml], Angular. DynamicComponentLoader , dymamically.