Question

我注意到Angular文档中有一个OnActivate，我正在尝试实现它，以便根据当前路线更改UI。

@Component(
    selector: "blah", 
    template: """blah""", 
    directives: const [routerDirectives])
class Blah extends Object with Reuse implements OnActivate {

    @override
    void onActivate(RouterState previous, RouterState current) {
        window.alert("Activated");
        print("activated");
    }

}

重新加载页面或使用路由器切换路由，并且onActivate不会触发

我正在使用以下代码片段来导航哪个有效：

  void navigate(RouteDefinition route) {
    final NavigationParams params =
        new NavigationParams(queryParameters: {"project-id": "1", "workspace-id": "2"}, replace: true);

    router.navigate(route.path, params);
  }

我在这里想念什么？

这是我的pubspec.yaml文件：

name: blah
version: 0.0.0
description: Blah

environment:
  sdk: ">=2.0.0 <3.0.0"

dependencies:
  angular: ^5.3.1
  angular_forms: ^2.1.2
  angular_router: ^2.0.0-alpha+22
  event_bus: any
  http: any
  js: ^0.6.0
  logging: ^0.11.3+1
  html: any
  html_unescape: ^1.0.1+2
  google_maps: ^3.4.1

  someothercomponent:
    path: ../someothercomponent

dev_dependencies:
  angular_test: 2.3.0
  build_runner: ^1.5.2
  build_test: ^0.10.2
  build_web_compilers: ^2.0.0
  test: ^1.0.0

编辑：当我通过构造函数注入路由器时，我不知道这是否以任何方式关联

  final Router router;

  ProjectLayout(this.router) {

    log.fine(this.router.current.toUrl());

  }

this.router.current为空

添加this.route，

  final RouterState route;
  final Router router;


  ProjectLayout(this.router, this.route) {

    log.fine(route.toUrl());

  }

它抱怨No provider found for RouterState，将RouterState添加为提供者，错误变成了非常奇怪的事情：

dart_sdk.js:99585 EXCEPTION: No provider found for String: RouterState -> String.
**NOTE**: This path is not exhaustive, and nodes may be missing in between the "->" delimiters. There is ongoing work to improve this error message and include all the nodes where possible. 
STACKTRACE: 
dart:sdk_internal                                                          throw_
package:angular/src/di/injector/injector.dart 20:3                         throwsNotFound
package:angular/src/di/injector/injector.dart 92:14                        get
package:angular/src/core/linker/app_view.dart 313:28                       injectorGet
package:angular/src/di/injector/element.dart 23:16                         [_injectFrom]
package:angular/src/di/injector/element.dart 31:7

因此，最好使用OnActivate使其正常工作，就像通过路由器注入使其正常工作一样

Answer 1

因此，基于对gitter的讨论，看来OnActivate仅适用于直接切入/切出路由器插座的组件，因此OnActivate将永远不适用于子组件。

在查看router的源代码时，我注意到此注释：

/// Note this isn't updated until after all `onActivate` implementations are
  /// invoked, and [onRouteActivated] fires.
  RouterState get current;

这意味着router.current仅在触发OnActivate的组件中才变为非空。

使用AngularDart5获取当前路线名称/ URL

1 个答案: