Question

我的问题是：

在我的应用程序index.html中有：

<app-root></app-root>

我有几个组件，如：
1.标题
2.关于
3.提议
4.项目
5.联系
6.Footer

我的app.component.html包含：

<app-header></app-header>

<router-outlet></router-outlet>

<app-footer></app-footer>

在HeaderComponent上，每个组件都有routerLinks（About，Offer，Projects，Contact）

我希望在localhost：4200 /上显示AboutComponent内容，并在单击routerLink时将其替换为其他内容。现在我的localhost：4200 /是空的，About页面是localhost：4200 / about。

是否可以在localhost：4200 /上放置“索引页面”并在触发子页面时隐藏它（例如localhost：4200 / contact）？

Answer 1

可以使用以下Routes数组（docs）。

const appRoutes: Routes = [
  { path: '', component: AboutComponent },
  { path: 'contact', component: ContactComponent }
  // your other routes
];

这需要在AppModule。

中导入

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
  ],
  ...
})
export class AppModule { }

Answer 2

在您的路由模块（app-routing.module.ts）中，您可以将根目录重定向到约

{ path: '', redirectTo: '/about', pathMatch: 'full' },

或者您可以设置根路径以使用AboutComponent

{ path: '', component: AboutComponent },

所以你的完整路由文件看起来像第一个选项

    import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';
    import { AboutComponent } from './about.component';
    import { OfferComponent } from './offer.component';
    import { ProjectsComponent } from './projects.component';
    import { ContactComponent } from './contact.component';

    const appRoutes: Routes = [
        { path: '', redirectTo: '/about', pathMatch: 'full' },
        { path: 'about', component: AboutComponent },
        { path: 'offer', component: OfferComponent },
        { path: 'projects', component: ProjectsComponent },
        { path: 'contact', component: ContactComponent }
    ];

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

    }

或者如果你使用section选项，它看起来像这样...

    import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';
    import { AboutComponent } from './about.component';
    import { OfferComponent } from './offer.component';
    import { ProjectsComponent } from './projects.component';
    import { ContactComponent } from './contact.component';

    const appRoutes: Routes = [
        { path: '', component: AboutComponent },
        { path: 'offer', component: OfferComponent },
        { path: 'projects', component: ProjectsComponent },
        { path: 'contact', component: ContactComponent }
    ];

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

    }

Angular 4主页面（localhost：4200）和我网站的路由索引

2 个答案: