Angular2 routing : How do I use [routerLink] within a <div [innerHTML] element? IE, linking with innerHTML
<p>So I'm building an angular2 static site template, with the main pages being written in markdown files. </p>

<p>I need to be able to have working links, written in markdown, without refreshing the page. </p>

<p>A sample page might be :</p>

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

<p>And the markdown file might contain</p>

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

<p>But for some reason, The back to home 2 isn't being rendered, because angular2 doesn't run binding on anything within a <code>&lt;div [innerHTML]</code>.</p>

<p>The standard markdown <code>[back to home 1](/)</code> just does a page reload, which isn't what I want. </p>

<p>Is there any way around my problem?</p>

<p>Thanks in advance. </p>