Angular2 routing : How do I use [routerLink] within a

Question

So I'm building an angular2 static site template, with the main pages being written in markdown files.

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

A sample page might 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 might 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, The back to home 2 isn't being rendered, because angular2 doesn't run binding on anything within a <div [innerHTML].

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

Is there any way around my problem?

Thanks in advance.

Answer 1

That is not supported. HTML added with [innerHtml] is not processed by Angular. You can use DynamicComponentLoader to add a link wrapped in a component dymamically.