Question

我有以下字符串，我已绑定到DOM元素＆＃39; innerHTML＆＃39;。我已经对它进行了清理，因此浏览器不会将其删除。 routerLink无法正常工作。如果我将其更改为href，那么它确实有效。如何让Angular绑定此链接？

绑定的HTML字符串

<a routerLink='/somelink'>Something</a>

Answer 1

routerLink='/somelink'是一种告诉Angular当您点击链接时如何behvae的方式。

这不是本机Javascript行为。

如果您使用innerHTML将此添加到您的组件，则永远不会工作。使用routerLink='/somelink'仅在您的代码未编译时。

为了使这个可视化，我们以(click)为例，因为它是相同的情况。请看下面的代码：

<button (click)="alert('working')">(click)</button>
<button onclick="alert('working')">onclick</button>

单击两个按钮，查看哪个按钮有效。这是因为 Angular根据其语法编译代码。 routerLink是其语法的一部分，而不是本机Javascript的一部分。

Answer 2

以下是Angular documentation的链接，以及示例：

<a [routerLink]="['/yourpath']">Your Route</a>

Answer 3

我发现这段代码在运行时动态编译routerLink。我已经尝试过它并且有效。

Plunker example

function createComponentFactory(compiler: Compiler, metadata: Component): Promise<ComponentFactory<any>> {
const cmpClass = class DynamicComponent {};
const decoratedCmp = Component(metadata)(cmpClass);

@NgModule({ imports: [CommonModule, RouterModule], declarations: [decoratedCmp] })
class DynamicHtmlModule { }

return compiler.compileModuleAndAllComponentsAsync(DynamicHtmlModule)
   .then((moduleWithComponentFactory: ModuleWithComponentFactories<any>) => {
    return moduleWithComponentFactory.componentFactories.find(x => x.componentType === decoratedCmp);
  });

}

将Angular routerLink绑定到DOM Element

3 个答案: