Angular 4基础路由实现：不同URL对应不同模块页面的方法

没问题，这正是Angular Router的核心用法之一，我来一步步给你讲清楚怎么实现这个需求：

步骤1：导入所需组件和路由模块 #

首先，你需要把MainComponent和AdminComponent（对应你的maincomponent.html和admin.html）导入到app.module.ts里，同时确保已经导入了Routes和RouterModule。

步骤2：定义路由配置数组 #

创建一个Routes类型的常量，配置每个路径对应的组件：

• 空路径''对应首页的MainComponent，这里一定要加上pathMatch: 'full'，确保只有当URL完全匹配根路径时才加载这个组件，避免路由匹配冲突。
• /admin路径对应AdminComponent。

步骤3：在NgModule中注册路由 #

在@NgModule的imports数组里，用RouterModule.forRoot(routes)来注册你的根路由配置。

步骤4：添加路由占位符 #

最后，在AppComponent的模板（app.component.html）里添加<router-outlet>标签——这是Angular用来渲染匹配到的组件内容的占位符，没有它的话路由组件不会显示。

完整的app.module.ts示例代码 #

import { AppComponent } from './app.component';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Routes, RouterModule } from "@angular/router";

// 替换成你实际的组件路径和类名
import { MainComponent } from './maincomponent/maincomponent.component';
import { AdminComponent } from './admin/admin.component';

// 路由配置
const routes: Routes = [
  { path: '', component: MainComponent, pathMatch: 'full' }, // 基础URL加载首页组件
  { path: 'admin', component: AdminComponent } // /admin路径加载后台组件
];

@NgModule({
  declarations: [
    AppComponent,
    MainComponent, // 必须在declarations中声明你的组件
    AdminComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes) // 注册根路由
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

补充：AppComponent模板修改 #

打开app.component.html，确保里面有这个占位符：

<router-outlet></router-outlet>

额外提示 #

• 如果需要处理404页面，可以在路由数组最后添加：{ path: '**', component: NotFoundComponent }（记得先导入对应的404组件）。
• 如果你的组件属于其他功能模块，也可以用RouterModule.forChild(routes)在子模块中配置路由，然后在根模块中导入子模块即可。

内容的提问来源于stack exchange，提问作者minizibi