Angular的路由和子路由是用来管理应用程序中不同页面之间的导航和状态的重要工具。下面是一个包含代码示例的解决方法。

首先，确保已经安装了Angular的路由模块。可以使用以下命令：

npm install @angular/router

接下来，在应用程序的主模块（通常是app.module.ts）中导入和配置路由模块。示例代码如下：

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

import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';
import { ContactComponent } from './contact.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent }
];

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

在上面的示例中，我们定义了三个路由：'home'、'about'和'contact'。每个路由都与一个组件相关联。

然后，在应用程序的根组件模板（通常是app.component.html）中添加一个标记，用于显示当前路由的组件内容。

My App

在上面的示例中，我们使用routerLink指令来定义导航链接。

最后，在每个相关组件的模板中，可以添加一些内容来显示该组件的内容。例如，以下是一个简单的Home组件的模板：

Home
Welcome to the home page!

现在，当应用程序运行时，根据URL的变化，Angular的路由器将自动加载和显示相应的组件。

此外，Angular还支持子路由，用于在一个组件中加载其他组件。例如，我们可以在home组件中添加一个子路由，用于显示home组件的详细信息。示例代码如下：

const routes: Routes = [
  { path: '', component: HomeComponent,
    children: [
      { path: 'details', component: HomeComponentDetails }
    ]
  },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent }
];

在上面的示例中，我们定义了一个子路由：'details'。该子路由与HomeComponentDetails组件相关联。

然后，在home组件的模板中，添加一个标记，用于显示子路由的组件内容。

Home
Welcome to the home page!

View Details

现在，当用户点击“View Details”链接时，Angular的路由器将加载和显示HomeComponentDetails组件的内容。

这就是Angular路由和子路由的基本用法和示例代码。希望对你有所帮助！