angular 通过 html 文本输入与路由器交互的最佳方式

Question

我使用 froala 文本编辑器来存储一些用户输入。我想在 html 文本中创建一些特定的输出，这些输出创建 links 能够与路由器或一般应用程序交互（调用控制器中的函数等等......）。

将 "reinterpret" html link 路由 link 的最佳方法是什么，这样页面就不会重新加载？

froala 输出：

<a href="/someRoute">some text</a>

治疗后会变成：

<a [routerLink]="['/someRoute']">some text</a>

编辑： 我不需要 froala。我可以创建自己的编辑器。但我需要将 html 用户输入转换为路由器 link 或组件函数

编辑 2：是否可以将 html 重新解释为

<app-mycomponent [someVariable]="someVariable"></app-mycomponent>

这是我需要的框架： https://stackblitz.com/edit/angular-tnnw8n?embed=1&file=src/app/hello.component.ts

我可以解析 html 以找到我的特定标签并在视图中使用 *ngIf

<ng-container *ngFor="let parsedHtml of arrayOfHtmlPart">
  <ng-container *ngIf="isHtml(parsedHtml)">
    {{parsedHtml}}
  </ng-container>
  <ng-container *ngIf="!isHtml(parsedHtml)">
    <app-mycomponent></app-mycomponent>
  </ng-container>
</ng-container>

但不优雅

Answer 1

您可以使用 @HostListener and @Input Binding Event and by following example of TableRow, in which i have performed redirection using Router:

这是在另一个组件的 HTML 中声明为

的组件

<app-table-row [takeMeTo]='"/redirected"'></app-table-row>

这将是它的实际组成部分 class

export class TableRowComponent implements OnInit {

  @Input() takeMeTo:string;

  @HostListener('click', ['$event.target'])
    onClick(btn) {
      console.log(this.takeMeTo);
      this.router.navigate([this.takeMeTo]);      
  };
  constructor(public router : Router) { }

  ngOnInit() {
  }
}

如果您想查看完整的流程和代码，请点击此处 Stackblitz。

编码愉快！！ :)

Answer 2

正如 Nasiruddin Saiyed 所说，您应该使用 Nasiruddin Saiyed @HostListener，然后检测您希望被视为路由器的 A 标签 links。如果元素 class 设置为 'content-inside'，它将作为路由器 link（无需重新加载）

@HostListener('click', ['$event'])
    public onClick(event) {
      if (event.target.tagName === 'A' && event.target.getAttribute('class') === 'content-inside') {
        this.router.navigate([event.target.getAttribute('href')]);
        event.preventDefault();
      } else {
        return;
      }
  }

angular 通过 html 文本输入与路由器交互的最佳方式

angular best way to interact with the router from html text input

froala

angular