Angular 使用路由器时加载 url

Question

我正在使用 Angular 7 + 路由器。例如，我的主页是 localhost:4200，我的路由器 url 之一是 localhost:4200/route，我在 localhost:4200/api/foo.[=20= 有一个 API 端点]

我试图让浏览器从两个位置加载 api 端点。如果我放置一个 href 指向 API 端点的锚点，两个锚点 link 都可以正常工作。但是，我需要以编程方式进行，我已经尝试了以下所有方法

window.open("localhost:4200/api/foo","_self")
window.location.replace('localhost:4200/api/foo');
window.location.href = 'localhost:4200/api/foo';

它们都在主页上工作，但如果我在路由器页面上，这样做会让我进入主页。

非常感谢任何帮助！

具体来说，我有一个 spring 引导服务器，其 url 模式如 /api/*。所有其他 url 由 angular 处理。我想让浏览器加载localhost:4200/api/foo，这是直接由服务器

中定义的get请求处理的

演示：

我的导航栏是一个组件，无论路由器如何，它都保持不变。 该按钮点击背后的代码如下。请注意，我第一次在某些 Angular 路由 url 下单击它时，它会加载主页，而不是 google.com

onLogIn() {
    window.open('https://www.google.com',"_self");
}

Routing.ts 文件

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { IndexComponent } from "./index/index.component";
import { MicroserviceComponent } from "./microservice/microservice.component";

const routes: Routes = [
    { path: '', component: IndexComponent},
    { path: 'microservice/:id', component: MicroserviceComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Answer 1

将 pathMatch 添加到您的空路由，缺少它，这就是您被重定向到主组件的原因

const routes: Routes = [
 { path: '', component: IndexComponent, pathMatch:'full'},
 { path: 'microservice/:id', component: MicroserviceComponent}
];