使用共享/动态Angular 6路由时如何创建新的Component实例

Question

我有一个Angular 6路由设置，如下所示：

const routes: Routes = [ {
  matcher: PageMatcher,
  component: PageComponent,
  resolve: {
    path: PageResolver
  }
},...


@Injectable()
export class PageResolver implements Resolve<string> {
  constructor() {}

  resolve(route: ActivatedRouteSnapshot) {
    const path = '/' + route.url.join('/').replace(/\.[^/.]+$/, '');
    return path;
  }
}

export function PageMatcher ( url: UrlSegment[] ): UrlMatchResult {
  const path = url.join('/');

  if (path.startsWith('foo/')) {
    return ({
      consumed: url,
      posParams: { path: url[url.length - 1]}
    });
  } 
}

路由节点可以匹配/ foo下的任何路径，并使用data['path'] = foo/the/path/to/the/page路由到PageComponent，用于以后的处理。

我的问题是，由于这是单个Route节点，因此在该Route节点的所有使用之间共享同一Page Component实例；因此foo / bar.html和foo / cat.html都将使用相同的PageComponent实例。

不幸的是，PageComponent扩展了第三方组件，这需要每个路径的每个PageComponent都是唯一对象。知道如何告诉Angular路由器为与此单个Router节点匹配的每个新路径/ URL创建一个新对象吗？