使用自定义ngDoBootstrap和createCustomElement时,Angular Router会忽略URL

里罗

我使用自定义ngDoBootstrap函数而不是默认值时,bootstrap: [AppComponent]如下所示:

@NgModule({
  imports:      [ BrowserModule, FormsModule, AppRoutingModule ],
  declarations: [ AppComponent, HelloComponent ],
  exports: [ AppComponent ],
  entryComponents: [ AppComponent ],
  // bootstrap: [AppComponent],
})
export class AppModule {
  constructor(private injector: Injector) {
  }

  public ngDoBootstrap(): any {
    const appElement = createCustomElement(AppComponent, { injector: this.injector });
    customElements.define('my-app', appElement);
  }
}

然后,应用程序路由中断。

它会忽略URL中的任何更改,并且仅在单击时才起作用<a [routerLink]='...'>初始路由/也未加载。

这一定是由于自定义引导机制引起的,因为当我取消注释时bootstrap: [AppComponent],一切正常。

此处提供完整的代码:stackblitz示例(由于stackblitz使用的打字稿版本,需要下载并在本地运行)

如何通过自定义应用程序模块引导使路由工作?

里罗

如果是自定义元素,则必须手动调用router.initialNavigation:

export class AppModule {
  constructor(private injector: Injector, private router: Router,
    private location: Location) {
    const appElement = createCustomElement(AppComponent, { injector: this.injector });
    customElements.define('my-app', appElement);


  public ngDoBootstrap(): void {
    // workaround for bug - initial route not loaded: https://github.com/angular/angular/issues/23740
    this.router.initialNavigation();
  }
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如果包括自定义条件,则Vaultquerybycriteria会忽略带有statestatus的常规条件

我如何自定义UIActivityViewController以在发布到Facebook和Twitter时显示URL链接?

使用自定义合同解析器而不是JsonConverter属性时,将忽略自定义JsonConverter进行反序列化

对HtmlService Webapp使用自定义URL

在为url提供路径时,react-router忽略嵌套路由

使用Angular 2 Router的URL的自定义编码(使用+号代替空格)

使用代码中的样式自定义Qt滑块时,手柄会脱离凹槽

Angular 6 Http客户端自定义URL和标头

使用自定义动画时,iOS9上的edgesForExtendedLayout被忽略

为什么使用Webflux进行弹簧启动测试会忽略自定义杰克逊模块

Ag-grid-使用自定义单元格编辑器时是否会忽略值解析器?

当色块数量超过颜色数量时,seaborn会忽略自定义调色板

Gson会忽略序列化时枚举的自定义@SerializedName值

导入使用React-Router-Dom的自定义模块组件时出现问题

为什么在创建url-Object时javascript会忽略url-string的端口?

更改Flask和自定义装饰器的顺序会破坏自定义装饰器

使用react-router的history.push()和自定义URL参数

使用htaccess自定义URL重写

离子自定义指令被Angular忽略

为什么重写URL时,美元符号$会忽略apache httpd.conf中的查询字符串

在自定义任务中使用'configurations.runtime.asPath'时,Gradle War会忽略传递依赖项

自定义按钮内容时忽略按钮字体属性

使用.htaccess文件和PHP创建自定义URL

使用主题中的自定义URL和自定义代码创建Wordpress页面

使用自定义验证的FileExtension验证会创建重复和无效的data- *属性

使用Build <T>时,将忽略“带有”的自定义-的自定义项

DRF 的自定义视图和 url

应用自定义样式时,DatGridCell 会重置

使用自定义域使用 GitHub 页面托管文件时获取“页面 url”?