angular - 组件 url 显示是应用中任意 url 地址的首页

Question

我有两个组件 app.component.html 和 app-success-component，在我的路由中我有：

        import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    import { SuccessComponenetComponent } from './success-componenet/success-componenet.component';

    const routes: Routes = [{ path:'success-componenet', component: SuccessComponenetComponent
    }];

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

问题是当我浏览时：

http://localhost:4200/success-componenet

网址是 http://localhost:4200/success-componenet 但它也显示了我的主页，我需要此页面为空，它的 html 中不包含任何内容，但为什么显示我的 http://localhost:4200/即使 url 是 http://localhost:4200/success-componenet 的页面，知道吗？

标签： angular

Answer 1

Angular 应用是 SPA（单页应用）。所有路线，例如 /fred 或 /success-component 服务index.html

index.html上菜app.component.html

在app.component.html你应该有：

<div>header here</div> <!-- optional: if you want a header on every page -->
<router-outlet></router-outlet>
<div>footer here</div> <!-- optional: if you want a footer on every page -->
<!-- you can use components here too if you want -->

并根据 URLrouter-outlet提供正确的组件。routes所以你的路线应该是：

const routes: Routes = [
  { path: 'success-componenet', component: SuccessComponenetComponent },
  { path: 'home', component: HomeComponent }
];

并且home-component.html应该是您的索引页。

祝一切顺利。