Home Cannot find route-parameter in child component
Reply: 0

Cannot find route-parameter in child component

Javad_Amiry Published in 2018-02-13 15:53:28Z

I have these simple routes for my AngularDart project:

// application shell 
@RouteConfig(const [
  const Route(path: '/...', name: 'Home', component: StatusesAreaComponent,useAsDefault: true),
class AppComponent { }

// my status area router
    selector: 'status-area',
    template: '<router-outlet></router-outlet>',
    directives: const [ROUTER_DIRECTIVES])
@RouteConfig(const [
  const Route(
      path: '/...',
      name: 'StatusArea',
      component: StatusesWrapperComponent,
      useAsDefault: true)
class StatusesAreaComponent {}

// status-wrapper component
  selector: 'statuses-wrapper',
  template: '<router-outlet></router-outlet>',
@RouteConfig(const [
  const Route(path: '/status/:id', name: 'StatusItem', component: StatusItemComponent),
  const Route(path: '/', name: 'StatusHome', component: StatusListComponent, useAsDefault: true),
class StatusesWrapperComponent  { }

The StatusListComponent works with this url: #/ just fine; But in StatusItemComponent component, the RouteParams canot find the :id parameter. The StatusItemComponent's code is below:

    selector: 'status-item',
    templateUrl: 'status_item_component.html',
class StatusItemComponent implements OnInit {
  final StatusService _statusService;
  final RouteParams _routeParams;
  final Location _location;

  Status status;

  StatusItemComponent(this._statusService, this._routeParams, this._location);

  Future<Null> ngOnInit() async {
    print('in ngOnInit in StatusItemComponent');
    var _id = _routeParams.get('id'); // I'll get error here
    print('_id = ' + _id);
    var id = int.parse(_id ?? '', onError: (_) => null);
    if (id != null) status = await _statusService.get(id);

In this line: var _id = _routeParams.get('id'); I'm getting this exception (from javascript console in Chrome):

in ngOnInit in StatusItemComponent -- this is log --
Instance of 'RouteParams' -- this is log --
EXCEPTION: Invalid argument: 1
Invalid argument: 1
    at Object.wrapException (http://localhost:49433/main.dart.js:4073:17)
    at Interceptor.$add (http://localhost:49433/main.dart.js:1397:19)
    at http://localhost:49433/main.dart.js:21513:44
    at _wrapJsFunctionForAsync_closure.$protected (http://localhost:49433/main.dart.js:6686:15)
    at _wrapJsFunctionForAsync_closure.dart._wrapJsFunctionForAsync_closure.call$2 (http://localhost:49433/main.dart.js:7181:14)
    at _awaitOnObject_closure.dart._awaitOnObject_closure.call$1 (http://localhost:49433/main.dart.js:7169:34)
    at StaticClosure.dart._rootRunUnary (http://localhost:49433/main.dart.js:7025:18)
    at _ZoneDelegate.runUnary$3 (http://localhost:49433/main.dart.js:9984:41)
    at NgZone.dart.NgZone._runUnary$5 (http://localhost:49433/main.dart.js:26490:24)
    at Object.eval (eval at Closure_forwardCallTo (http://localhost:49433/main.dart.js:4393:14), <anonymous>:2:47)
ORIGINAL EXCEPTION: Invalid argument: 1

I'm pretty new to both Angular and Dart and have no idea what the problem may be. Would you help please to find the problem? Thanks in advance.


The requested url is #/status/1. Also, I changed the line print(_routeParams); with print(_routeParams.params); and the id exists in params; it prints:

{id: 1}

Also, I should mention where I refresh page, it works! but not in first load.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.632419 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO