1

我有一个非常简单的 Angular 4+ 应用程序，它从 API 获取数据并显示数据。我相信这应该可以通过仅使用根组件来实现：{path: 'main', component: MainComponent} 和 QueryParams 之类的?id=1.

我能够获取查询参数，但由于某种原因，我的路由器在已经存在的 route+params 部分之后重复了 URL 的 route+params 部分。例如，我的本地地址从localhost:4200/main?id=1into不正确localhost:4200/main?id=1/main?id=1。

ActivatedRoute 确实从 URL 中选择了正确的查询参数，但我希望尽可能地清理 URL。如何防止这种重复发生？我<base href='/'>在 index.html 中根据路由要求进行了设置。

模块：

@NgModule({
  imports: [
    BrowserModule,
    RouterModule,
    RouterModule.forRoot(
      [
        { path: 'main', component: MainComponent},
      ]),
    CommonModule,
    HttpModule,
    FormsModule,
    NgbModule.forRoot()
  ],
  declarations: [MainComponent],
  providers: [
    {provide: APP_BASE_HREF, useValue: window.document.location.href},
    DataService,
    WindowService,
    HttpUtil
  ],
  bootstrap: [MainComponent]
})
export class MainModule{}

零件：

@Component({
  selector: 'main-component',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css']
})

export class MainComponent implements OnInit {

  constructor(private dataService: DataService,
              private activatedRoute: ActivatedRoute) {
  }

  ngOnInit() {
    this.activatedRoute.queryParams.subscribe((params: Params) => {
      if (!(Object.keys(params).length === 0 && params.constructor === Object)) {
        console.log(params);
      }
    });
  }
}
4

1 回答 1

0

这是由您的APP_BASE_HREF

{provide: APP_BASE_HREF, useValue: window.document.location.href}

您正在告诉应用程序使用 window.document.location.hrefmain?id=1作为您的 basehref。然后 Angular 将自己的路由附加到 basehref 的末尾。这就是为什么你得到重复

 localhost:4200/main?id=1(< APP_BASE_HREF)/main?id=1(< ROUTE)

以下是关于 APP_BASE_HREF 功能的文档（https://angular.io/api/common/PathLocationStrategy#description）

于 2017-11-13T14:25:55.510 回答