Question

我在标题组件html中有以下代码

<md-toolbar color="primary">
    <span> <img   src="/assets/images/logo.png" height=30 width=41></span>
    <a md-button routerLink="/home"><span class="fa fa-home fa-lg"></span> 
    Home</a>
    <a md-button><span class="fa fa-info fa-lg"></span> About</a>
    <a md-button routerLink="/menu"><span class="fa fa-list fa-lg"></span> 
    Menu</a>
    <a md-button><span class="fa fa-address-card fa-lg"></span> Contact</a>

</md-toolbar>

和

路由模块

export const routes: Routes = [
  { path: 'home',  component: HomeComponent },
  { path: 'menu',  component: MenuComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' }
];

当我点击标题上的菜单图标时;控制台上出现以下错误。我有点无能为力。

_this._renderer.removeClass is not a function
    at eval (common.js:2241)
    at Array.forEach (<anonymous>)
    at ClassDirective.NgClass._toggleClass (common.js:2236)
    at eval (common.js:2215)
    at Array.forEach (<anonymous>)
    at ClassDirective.NgClass._removeClasses (common.js:2215)
    at ClassDirective.set [as klass] (common.js:2079)
    at ClassDirective.set [as classBase] (class.js:126)
    at updateProp (core.js:12661)
    at c

谢谢

Answer 1

如果没有看到完整的代码，很难确定。但这是我在使用路由器模块之前遇到的一个常见问题。不能保证这会解决您的问题，但它绝对值得关注，可以帮助其他人遇到类似的错误。

确保您正在调用RouterModule.forRoot()并传递routes文件中的app.module.ts对象。否则你可能会遇到许多奇怪的错误，这些错误很难调试。

请参阅Angular Docs中的示例：

@NgModule({
  imports: [
  RouterModule.forRoot(
    appRoutes,
    { enableTracing: true } // <-- debugging purposes only
  )
  // other imports here
],

Answer 2

HeaderComponent.html:3 ERROR TypeError: _this._renderer.removeClass is not a function
    at eval (common.js:2241)
    at Array.forEach (<anonymous>)
    at ClassDirective.NgClass._toggleClass (common.js:2236)
    at eval (common.js:2215)
    at Array.forEach (<anonymous>)
    at ClassDirective.NgClass._removeClasses (common.js:2215)
    at ClassDirective.set [as klass] (common.js:2079)
    at ClassDirective.set [as classBase] (class.js:126)
    at updateProp (core.js:12661)
    at checkAndUpdateDirectiveInline (core.js:12368)
View_HeaderComponent_0 @ HeaderComponent.html:3
proxyClass @ compiler.js:14659
DebugContext_.logError @ core.js:15038
ErrorHandler.handleError @ core.js:1510
(anonymous) @ core.js:5925
ZoneDelegate.invoke @ zone.js:388
Zone.run @ zone.js:138
NgZone.runOutsideAngular @ core.js:4708
ApplicationRef.tick @ core.js:5925
(anonymous) @ core.js:5751
ZoneDelegate.invoke @ zone.js:388
onInvoke @ core.js:4760
ZoneDelegate.invoke @ zone.js:387
Zone.run @ zone.js:138
NgZone.run @ core.js:4577
next @ core.js:5751
schedulerFn @ core.js:4342
SafeSubscriber.__tryOrUnsub @ Subscriber.js:243
SafeSubscriber.next @ Subscriber.js:190
Subscriber._next @ Subscriber.js:131
Subscriber.next @ Subscriber.js:95
Subject.next @ Subject.js:56
EventEmitter.emit @ core.js:4322
checkStable @ core.js:4725
onHasTask @ core.js:4773
ZoneDelegate.hasTask @ zone.js:441
ZoneDelegate._updateTaskCount @ zone.js:461
Zone._updateTaskCount @ zone.js:285
Zone.runTask @ zone.js:205
drainMicroTaskQueue @ zone.js:595
ZoneTask.invokeTask @ zone.js:500
invokeTask @ zone.js:1540
globalZoneAwareCallback @ zone.js:1566
HeaderComponent.html:3 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 11, nodeDef: {…}, elDef: {…}, elView: {…}}

Answer 3

这是与Flex-Layout干扰路由器模块有关的报告问题。 https://github.com/angular/angular/issues/18922

尝试确保所有依赖项都是最新的。如果这不起作用，您可能需要降级到更早版本的角度。

角度路由模块

3 个答案: