与 Angular 11 的动态 [routerLink] 绑定

Question

routerLink 和 queryParams 具有以下值。尝试在 HTML 中绑定值

anchorValue : string = `<a [routerLink]="['../category/new ']" [queryParams]="{ query: 'category' }" routerLinkActive = "router-link-active"> Add category</a>`

HTML

<mat-hint [innerHTML]="anchorValue"></mat-hint>

这确实将值绑定到mat-hint，但锚链接不起作用。知道如何实现这一目标吗？

如果我使用下面的代码

<mat-hint>
  {{anchorValue}}
</mat-hint>

我得到以下输出

Answer 1

innerHTML 不会正确设置角度绑定。只需将其放在mat-hint 标签内即可：

<mat-hint>
  <a [routerLink]="['../category/new ']" [queryParams]="{ query: 'category' }" routerLinkActive = "router-link-active"> Add category</a>
</mat-hint>

根据需要使用ngIf 或ngSwitch 指令来修改模板。