2

I'm displaying sanitized HTML in one my routes, which contains links to other parts of the router. However, clicking them results in the website reloading.

How do I pass the link to the router from outside the angular2 scope?

Example

article.component.ts

  @Component({
      selector: "article",
      template: `<div [innerHTML]="content"></div>`, //html is not parsed by ng because its outside the scope
      providers: []
  })

  export class ArticleComponent{
    public content;
    constructor(private sanitizer: DomSanitizer){
        this.content = this.sanitizer.bypassSecurityTrustHtml(`<a href="/article/some_id">example link</a>`); 
    }

  }

In my case, this.content is dynamic html downloaded via http request, which is why it must be sanitized.

app.routing.ts

const appRoutes: Routes = [
    {
        path: "article/:id",
        component: ArticleComponent
    }
]

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
x0a
  • 255
  • 4
  • 17
  • Please show the code. – Günter Zöchbauer Oct 06 '16 at 04:33
  • I added some example code. It's just [innerHTML]="sanitizedHTML", where sanitizedHTML contains regular href links (since [routerLinks] aren't parsed). Clicking them reloads the page rather than sending it through the router. I'm looking for a neat way to force the router to handle those links. – x0a Oct 06 '16 at 16:48
  • You can only add plain HTML using `[innerHTML]`. No bindings, no directives, no components, and no anything else Angular2 specific. – Günter Zöchbauer Oct 06 '16 at 16:49
  • Yes. I want to try to access the router from outside the ng scope, or maybe some recommendations of a better way to do this. – x0a Oct 06 '16 at 17:03
  • "access the router from outside ng scope" is quite vague. Perhaps http://stackoverflow.com/questions/36997625/angular-2-communication-of-typescript-functions-with-external-js-libraries/36997723#36997723 – Günter Zöchbauer Oct 06 '16 at 17:06
  • I mean I'd like to attach click handlers to those links (from outside angular), that will pass those links/click events to the angular component that contains the sanitizedHTML. So that I can use this.router.navigate instead of letting the website reload. That looks useful. Thanks. – x0a Oct 06 '16 at 17:16

0 Answers0