Angular 角度4：材料md单元内的routerLink锚固件赢得'；行不通

更新：md表使用flex布局指令包装在一些容器中，这似乎是导致此问题的原因。我正在更新代码以显示这些包装器。具体来说，外包装中的fxLayoutGap正在破坏应用程序

我在angular 4中有一个数据表，它显示了数据库中的记录列表。在特定的行上单击（实际上是单元格单击），应用程序将显示该行的详细数据（应用程序中的另一个url）。我试图通过在md单元内使用routerLink锚来实现这一点，如下所示：

<div class="main-content-container" fxLayoutGap="10px">
    <div class="table-container mat-elevation-z8" fxLayout.xs="column">
        <md-table #table [dataSource]="dataSource" fxFlex="100">

            <ng-container cdkColumnDef="id">
                <md-header-cell *cdkHeaderCellDef> ID </md-header-cell>
                <md-cell *cdkCellDef="let row"> 
                    <a [routerLink]="['/detail']">{{row.id}}</a> 
                </md-cell>
            </ng-container>
            ...
        </md-table>
    </div>
</div>

身份证件
{{row.id}}
...

但当我尝试此操作时，浏览器控制台中出现了一个奇怪的错误，似乎与代码中的任何内容都无关：

ERROR Error: Uncaught (in promise): TypeError: _this._renderer.setStyle is not a function
TypeError: _this._renderer.setStyle is not a function
at base.js:107
at Array.forEach (<anonymous>)
at base.js:107
at Array.forEach (<anonymous>)
at FlexDirective.webpackJsonp.../../../flex-layout/flexbox/api/base.js.BaseFxDirective._applyStyleToElements (base.js:106)
at FlexDirective.webpackJsonp.../../../flex-layout/flexbox/api/base.js.BaseFxDirective._getFlowDirection (base.js:78)
at FlexDirective.webpackJsonp.../../../flex-layout/flexbox/api/flex.js.FlexDirective._validateValue (flex.js:200)
at FlexDirective.webpackJsonp.../../../flex-layout/flexbox/api/flex.js.FlexDirective._updateStyle (flex.js:192)
at FlexDirective.webpackJsonp.../../../flex-layout/flexbox/api/flex.js.FlexDirective._onLayoutChange (flex.js:183)
at SafeSubscriber._next (flex.js:50)
at base.js:107
at Array.forEach (<anonymous>)
at base.js:107
at Array.forEach (<anonymous>)
at FlexDirective.webpackJsonp.../../../flex-layout/flexbox/api/base.js.BaseFxDirective._applyStyleToElements (base.js:106)
at FlexDirective.webpackJsonp.../../../flex-layout/flexbox/api/base.js.BaseFxDirective._getFlowDirection (base.js:78)
at FlexDirective.webpackJsonp.../../../flex-layout/flexbox/api/flex.js.FlexDirective._validateValue (flex.js:200)
at FlexDirective.webpackJsonp.../../../flex-layout/flexbox/api/flex.js.FlexDirective._updateStyle (flex.js:192)
at FlexDirective.webpackJsonp.../../../flex-layout/flexbox/api/flex.js.FlexDirective._onLayoutChange (flex.js:183)
at SafeSubscriber._next (flex.js:50)
at resolvePromise (zone.js:770)
at resolvePromise (zone.js:741)
at zone.js:818
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
at Object.onInvokeTask (core.es5.js:3881)
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:191)
at drainMicroTaskQueue (zone.js:584)
at HTMLAnchorElement.ZoneTask.invoke (zone.js:490)

ERROR ERROR:Uncaught（承诺中）：TypeError:\u this.\u renderer.setStyle不是函数
TypeError:_this._renderer.setStyle不是函数
在基地。js:107
在Array.forEach（）处
在基地。js:107
在Array.forEach（）处
在FlexDirective.webpackJsonp…/../flex布局/flexbox/api/base.js.BaseFxDirective.\u applyStyleToElements（base.js:106）
在FlexDirective.webpackJsonp…/../flex布局/flexbox/api/base.js.BaseFxDirective.\u getFlowDirection（base.js:78）
在FlexDirective.webpackJsonp…/../flex布局/flexbox/api/flex.js.FlexDirective.\u validateValue（flex.js:200）
在FlexDirective.webpackJsonp…/../flex布局/flexbox/api/flex.js.FlexDirective.\u updateStyle（flex.js:192）
在FlexDirective.webpackJsonp…/../flex布局/flexbox/api/flex.js.FlexDirective.\u onLayoutChange（flex.js:183）
在SafeSubscriber._next（flex.js:50）
在基地。js:107
在Array.forEach（）处
在基地。js:107
在Array.forEach（）处
在FlexDirective.webpackJsonp…/../flex布局/flexbox/api/base.js.BaseFxDirective.\u applyStyleToElements（base.js:106）
在FlexDirective.webpackJsonp…/../flex布局/flexbox/api/base.js.BaseFxDirective.\u getFlowDirection（base.js:78）
在FlexDirective.webpackJsonp…/../flex布局/flexbox/api/flex.js.FlexDirective.\u validateValue（flex.js:200）
在FlexDirective.webpackJsonp…/../flex布局/flexbox/api/flex.js.FlexDirective.\u updateStyle（flex.js:192）
在FlexDirective.webpackJsonp…/../flex布局/flexbox/api/flex.js.FlexDirective.\u onLayoutChange（flex.js:183）
在SafeSubscriber._next（flex.js:50）
在resolvePromise（zone.js:770）
在resolvePromise（zone.js:741）
在zone.js:818
在ZoneDelegate.webpackJsonp…/../../../../../../zone.js/zone.js.ZoneDelegate.invokeTask（zone.js:424）
位于Object.onInvokeTask（core.es5.js:3881）
在ZoneDelegate.webpackJsonp…/../../../../../zone.js/zone.js.ZoneDelegate.invokeTask（zone.js:423）
位于Zone.webpackJsonp…/../../../../../Zone.js/dist/Zone.js.Zone.runTask（Zone.js:191）
在drainMicroTaskQueue（zone.js:584）
位于htmlanchorement.ZoneTask.invoke（zone.js:490）

---

很明显这和锚有关但是。。。不知道我是否遗漏了一些概念或什么，而且没有太多的示例。

您使用的是哪个TypeScript版本？TypeScript 2.3.4我刚刚注意到日志错误显示flex布局模块中有几个错误。因此，我拿出了所有的flex指令（我在我的原始帖子中没有包括这些指令，请参阅更新版本），它可以正常工作。经过一些调试，我发现fxLayoutGap导致了这个问题。不知道这是一个bug还是对指令的滥用。但我认为这与打字无关。