【问题标题】:Unable to inject ActivatedRouteSnapshot无法注入 ActivatedRouteSnapshot
【发布时间】:2017-10-27 14:08:14
【问题描述】:

将 ActivatedRouteSnapshot 注入组件不起作用(注入 ActivatedRoute 也不起作用)。这里是堆栈跟踪:

"Error: Can't resolve all parameters for ActivatedRouteSnapshot: (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?).
at SyntaxError.ZoneAwareError (http://localhost:4200/polyfills.bundle.js:7042:33)
at SyntaxError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:73735:16)
at new SyntaxError (http://localhost:4200/vendor.bundle.js:6140:16)
at CompileMetadataResolver._getDependenciesMetadata (http://localhost:4200/vendor.bundle.js:19345:31)
at CompileMetadataResolver._getTypeMetadata (http://localhost:4200/vendor.bundle.js:19220:26)
at CompileMetadataResolver._getInjectableMetadata (http://localhost:4200/vendor.bundle.js:19208:21)
at CompileMetadataResolver.getProviderMetadata (http://localhost:4200/vendor.bundle.js:19450:40)
at http://localhost:4200/vendor.bundle.js:19408:49
at Array.forEach (native)
at CompileMetadataResolver._getProvidersMetadata (http://localhost:4200/vendor.bundle.js:19375:19)
at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (http://localhost:4200/vendor.bundle.js:18848:30)
at CompileMetadataResolver._loadDirectiveMetadata (http://localhost:4200/vendor.bundle.js:18736:23)
at http://localhost:4200/vendor.bundle.js:18937:54
at Array.forEach (native)
at CompileMetadataResolver.loadNgModuleDirectiveAndPipeMetadata (http://localhost:4200/vendor.bundle.js:18936:41)"

在组件中,ActivatedRouteSnapshot的注入方式如下:

constructor([...], private router: Router,
          private route: ActivatedRouteSnapshot) {
    [...]
}

app.component.ts中提供了ActivatedRouteSnapshot:

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    providers: [[...], ActivatedRouteSnapshot]
})

我正在尝试访问查询参数,类似于在此处完成的方式:https://stackoverflow.com/a/38997116/3433306

根据文档,它应该像将它添加到构造函数参数一样简单:https://angular.io/docs/ts/latest/api/router/index/ActivatedRouteSnapshot-interface.html

成功注入 ActivatedRouteSnapshot 缺少什么?

【问题讨论】:

  • AFAIK ActivatedRouteSnapshot 不是提供者。只要您的应用程序有一个路由到您的组件的路由器,您就可以简单地将快照注入其中而无需其他任何东西。
  • providers: [[...], ActivatedRouteSnapshot] 中删除ActivatedRouteSnapshot。它由路由模块自动提供
  • 当我从提供者列表中删除它时,我收到一条错误消息 Error: Error in ./LoginPageComponent class LoginPageComponent - inline template:6:10 caused by: No provider for ActivatedRouteSnapshot!(请注意,我正在尝试注入 LoginFormComponent ,它是错误中提到的 LoginPageComponent 的子组件)跨度>

标签: angular typescript angular2-routing


【解决方案1】:

使用 ActivatedRoute 代替 ActivatedRouteSnapshot。然后你可以像这样使用快照:

constructor(activatedRoute: ActivatedRoute) { 
  var snapshot = activatedRoute.snapshot;
}

【讨论】:

  • 我不明白为什么会导致问题?
  • @Akshay 显然,ActivatedRouteSnapshot 不是提供者,无法注入(请参阅原始问题下方的评论)。但是,如果注入ActivatedRoute,则可以访问它附带的快照。
  • activatedRoute.snapshot.url 无论 url 是什么都返回空数组
  • @MohamedAboElmagd:我想您正在使用延迟加载,并且您正在检查 activatedRoute.snapshot.url 的组件属于具有空路径的路由。尝试打印出父快照的属性:activatedRoute.snapshot.parent.url
  • 如果你理解了activatedRoute 和ActivatedRouteSnapshot 的主要区别,那么我就很容易理解为什么ActivatedRouteSnapshot 注入会报错。 Diff => 由于ActivatedRoute 可以重复使用,因此ActivatedRouteSnapshot 是一个不可变对象,表示特定版本的ActivatedRoute。它将所有与 ActivatedRoute 相同的属性公开为普通值,而 ActivatedRoute 将它们公开为可观察对象。 ActivatedRouteSnapshot 正在解析中工作,当其中一条路由激活时将调用该解析。
猜你喜欢
  • 2019-03-08
  • 1970-01-01
  • 2016-11-21
  • 2020-03-31
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多