Will AngularDart 5 child routes refresh the parent route

Question

I have an AngularDart 5 application with the following nested component structure:

The mainComponent with the main router outlet. Its path is /.
Component A as the child of the mainComponent. It also has its own router outlet and its path is /a.
Component 1 as a child of A. Its path is /a/1.
Component 2 as another child of A. Its path is
/a/2.

Will switching from 1 to 2 trigger a reload/render of the page a?

E.g. when playing a video in a will switching from 1 to 2 make the video reload?

If so, can this be prevented?

I´m actually asking this question because for me when switching from 1 to 2 the page will reload/rerender.

EDIT:

Here are my routing configurations.

Routes of the main component:

class AppRoutePaths {
  static final portal = RoutePath(path: 'portal');
  static final workspace = RoutePath(path: 'workspace');
}

class AppRoutes {
  static final _default = RouteDefinition.redirect(
      path: '', redirectTo: AppRoutePaths.portal.toUrl());

  static final _workspaceRoute = RouteDefinition(
      routePath: AppRoutePaths.workspace,
      component:
          workspace_component.WorkspaceComponentNgFactory as ComponentFactory);

  static final all = [_default, _workspaceRoute];
}

and the corresponding router outlet:

<router-outlet [routes]="AppRoutes.all"></router-outlet>

Those are the routes of component A:

class WorkspaceRoutePaths {
  static final dashboard =
      RoutePath(path: 'dashboard', parent: AppRoutePaths.workspace);

  static final settings =
      RoutePath(path: 'settings', parent: AppRoutePaths.workspace);
}

class WorkspaceRoutes {
  static final dashboard = RouteDefinition(
      routePath: WorkspaceRoutePaths.dashboard,
      component: dashboard_component_template.DashboardComponentNgFactory as ComponentFactory);

  static final settings = RouteDefinition(
      routePath: WorkspaceRoutePaths.settings,
      component: settings_component_template.SettingsComponentNgFactory as ComponentFactory);

  static final _default = RouteDefinition.redirect(
      path: '', redirectTo: WorkspaceRoutePaths.dashboard.toUrl());

  static final all = [dashboard, settings, _default];
}

and the corresponding router outlet:

<router-outlet [routes]="WorkspaceRoutes.all"></router-outlet>

is a router-outlet located in A so 1 and 2 are children of A? — alsami
So 'workspace' is just a logical path, does not contain a component? — alsami

Tobias Marschall Tobias Marschall · Accepted Answer · 2018-09-04T08:06:34

If you want a component to be reused then you need to add the CanReuse mixin to your component.

In the case of component A it would look like this:

@Component(
    selector: "component-a",
    templateUrl: "component-a.html",
    styleUrls: ["component-a.css"],
    directives: [routerDirectives])
class A with CanReuse {...}

Will AngularDart 5 child routes refresh the parent route

1 Answers