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

Cannot find route-parameter in child component

Javad_Amiry
1#
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
@Component(
    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
@Component(
  selector: 'statuses-wrapper',
  template: '<router-outlet></router-outlet>',
  directives: const [CORE_DIRECTIVES,ROUTER_DIRECTIVES],
)
@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:

@Component(
    selector: 'status-item',
    templateUrl: 'status_item_component.html',
    directives: const [CORE_DIRECTIVES, ROUTER_DIRECTIVES])
class StatusItemComponent implements OnInit {
  final StatusService _statusService;
  final RouteParams _routeParams;
  final Location _location;

  Status status;

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

  @override
  Future<Null> ngOnInit() async {
    print('in ngOnInit in StatusItemComponent');
    print(_routeParams);
    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
STACKTRACE: 
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.

UPDATE:

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