Angular routeLink不使用角材料MdTableModule/CdkTableModule md单元

根据角度材料,， MdTable构建在的顶部

如果将

a

元素的

routeLink

属性放在带有表达式的

md单元格

元素中，例如

<ng-container cdkColumnDef="name">
  <md-header-cell *cdkHeaderCellDef> Name</md-header-cell>
  <md-cell *cdkCellDef="let row" >
    <a routerLink="/customers/{{row.id}}">{{row.name}}</a>
  </md-cell>
</ng-container>

名称
{{row.name}

控制台中的错误堆栈：

core.es5.js:1020 ERROR Error: Uncaught (in promise):TypeError:renderer.setAttribute is not a function
TypeError: renderer.setAttribute is not a function
at MdTable.CdkTable (cdk.es5.js:1869)
at new MdTable (material.es5.js:20855)
at createClass (core.es5.js:10924)
at createDirectiveInstance (core.es5.js:10742)
at createViewNodes (core.es5.js:12178)
at callViewAction (core.es5.js:12624)
at execComponentViewsAction (core.es5.js:12533)
at createViewNodes (core.es5.js:12205)
at callViewAction (core.es5.js:12624)
at execComponentViewsAction (core.es5.js:12533)
at MdTable.CdkTable (cdk.es5.js:1869)
at new MdTable (material.es5.js:20855)
at createClass (core.es5.js:10924)
at createDirectiveInstance (core.es5.js:10742)
at createViewNodes (core.es5.js:12178)
at callViewAction (core.es5.js:12624)
at execComponentViewsAction (core.es5.js:12533)
at createViewNodes (core.es5.js:12205)
at callViewAction (core.es5.js:12624)
at execComponentViewsAction (core.es5.js:12533)
at resolvePromise (zone.js:784)
at resolvePromise (zone.js:755)
at zone.js:832
at ZoneDelegate.webpackJsonp.682.ZoneDelegate.invokeTask (zone.js:424)
at Object.onInvokeTask (core.es5.js:3881)
at ZoneDelegate.webpackJsonp.682.ZoneDelegate.invokeTask (zone.js:423)
at Zone.webpackJsonp.682.Zone.runTask (zone.js:191)
at drainMicroTaskQueue (zone.js:596)
at <anonymous>

core.es5.js:1020错误：未捕获（承诺中）：TypeError:renderer.setAttribute不是函数
TypeError:renderer.setAttribute不是函数
位于MdTable.CdkTable（cdk.es5.js:1869）
在新的MdTable中（material.es5.js:20855）
在createClass（core.es5.js:10924）
在createDirectiveInstance（core.es5.js:10742）
在createViewNodes上（core.es5.js:12178）
在callViewAction（core.es5.js:12624）
在execComponentViewsAction（core.es5.js:12533）
在createViewNodes上（core.es5.js:12205）
在callViewAction（core.es5.js:12624）
在execComponentViewsAction（core.es5.js:12533）
位于MdTable.CdkTable（cdk.es5.js:1869）
在新的MdTable中（material.es5.js:20855）
在createClass（core.es5.js:10924）
在createDirectiveInstance（core.es5.js:10742）
在createViewNodes上（core.es5.js:12178）
在callViewAction（core.es5.js:12624）
在execComponentViewsAction（core.es5.js:12533）
在createViewNodes上（core.es5.js:12205）
在callViewAction（core.es5.js:12624）
在execComponentViewsAction（core.es5.js:12533）
在resolvePromise（zone.js:784）
在resolvePromise（zone.js:755）
在zone.js:832
在ZoneDelegate.webpackJsonp.682.ZoneDelegate.invokeTask（zone.js:424）
位于Object.onInvokeTask（core.es5.js:3881）
在ZoneDelegate.webpackJsonp.682.ZoneDelegate.invokeTask（zone.js:423）
位于Zone.webpackJsonp.682.Zone.runTask（Zone.js:191）
在drainMicroTaskQueue（zone.js:596）
在

问题的根本原因是

routerLink

的值中的

{{row.id}

当我如下更改

a

元素时，异常将消失

{{row.name}}

---

导航

是在

组件中定义的自定义功能

我认为这与MdTable无关，在尝试使用routerLink的任何地方都会发生。您没有绑定到

row.id

，而是将字符串

“/customers/{{row.id}}}”

作为目标，routerLink似乎会在其上绊倒

相反，试试这个

<a [routerLink]="['/customers', row.id]">{{row.name}}</a>

{{row.name}

发布完整的代码