custom breadcrumb not displaying for parent routes

[emilol]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request

When a non-terminal route with a breadcrumb is modified using BreadcrumbService.changeBreadcrumb, the custom breadcrumb name is only used when the route is terminal. If a child route is navigated to, the parent reverts to whatever is in route parameters.

Minimal reproduction of the problem with instructions

app.route.ts

export const rootRouterConfig: Routes = [
  ...
  {path: 'github', ..., data: { breadcrumb: 'GitHub'},
    children: [
      {path: '', ...},
      {path: ':org', component: OrganisationComponent, data: { breadcrumb: 'Organisation'},
        children: [
          {path: '', ... },
          {path: ':repo', ..., data: { breadcrumb: 'Repo'}}
        ]
      }
    ]
  }
];

organisation.component.ts

@Component({ ... })
export class OrganisationComponent {
  organisation: { name?:string } = {};

  ngOnInit() {
    route.params.subscribe(params => {
      this.setOrganisationCrumb(params['org']);
    });
  }

  setOrganisationCrumb(organisationName: string) {
    this.breadcrumbService.changeBreadcrumb(this.route.snapshot, organisationName);
  }
}

Current behavior

#/github/Angular, #/github/VueJs

GitHub > Angular

GitHub > VueJs

#/github/Angular/samples, #/github/VueJs/vue

GitHub > Organisation > samples

GitHub > Organisation > vue

Expected behavior

Always display the custom display name. e.g.

#/github/Angular/samples, #/github/VueJs/vue

GitHub > Angular > samples

GitHub > VueJs > vue