Angular 4+：能否将传入组件模板的字符串解析为HTML？

The issue you're facing comes down to two key Angular behaviors:

1. Interpolation ({{ }}) automatically escapes HTML to prevent XSS risks, so your <a routerLink...> tag gets displayed as plain text instead of a functional link.
2. Even if you switch to [innerHTML] to render the HTML string, Angular doesn’t compile or activate Angular-specific directives like routerLink in dynamically inserted HTML.

Here are two reliable fixes tailored to different use cases:

Option 1: Split Content for Native RouterLink (Recommended) #

If your description follows a consistent structure with a single link, split the text and link details in your constant. This avoids security risks and ensures the routerLink works as intended.

Update Your Constant: #

export const BARS: Blurb = { 
  title: "Bars", 
  descriptionText: "blah blah blah. ",
  link: {
    text: "Barcades",
    route: "/barcades"
  }
};

Modify Your Template: #

<h3>{{blurb.title}}</h3>
<p>
  {{blurb.descriptionText}}
  <a [routerLink]="blurb.link.route">{{blurb.link.text}}</a>
</p>

This approach is clean, maintains Angular’s built-in security, and guarantees proper router navigation without extra work.

Option 2: Render HTML String with Manual Router Navigation #

If you need to keep the full HTML string (e.g., for complex content with multiple links), use Angular’s DomSanitizer to render the HTML, then add a click handler to intercept routerLink clicks and navigate manually.

Component Code: #

import { Component, Input } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { Router } from '@angular/router';

@Component({
  selector: 'app-blurb',
  templateUrl: './blurb.component.html'
})
export class BlurbComponent {
  @Input() blurb: Blurb; // Use your actual Blurb type
  sanitizedDescription: SafeHtml;

  constructor(
    private sanitizer: DomSanitizer,
    private router: Router
  ) {}

  ngOnInit() {
    // Sanitize the HTML to allow rendering (only for trusted content!)
    this.sanitizedDescription = this.sanitizer.bypassSecurityTrustHtml(this.blurb.description);
  }

  handleRouterLinkClick(event: MouseEvent) {
    const target = event.target as HTMLElement;
    // Check if the clicked element is an anchor with routerLink
    if (target.tagName === 'A' && target.hasAttribute('routerLink')) {
      event.preventDefault(); // Stop default anchor behavior
      const route = target.getAttribute('routerLink');
      if (route) {
        this.router.navigate([route]); // Use Angular Router to navigate
      }
    }
  }
}

Template Code: #

<h3>{{blurb.title}}</h3>
<p [innerHTML]="sanitizedDescription" (click)="handleRouterLinkClick($event)"></p>

⚠️ Important Security Note: Only use this method if your HTML content is fully trusted (like your static BARS constant). Using bypassSecurityTrustHtml with untrusted user input can expose your app to XSS attacks.

内容的提问来源于stack exchange，提问作者Andrew Davidson