这个问题的解决方法是确保 App.component 不会被不同的路由覆盖。可以在 app.module.ts 中使用 RouterModule.forRoot() 方法来设置路由。 在 app.component.html 中使用 元素来显示路由视图。这样，只有路由对应的组件才会显示在 中，而不会覆盖整个应用程序。 以下是示例代码：

app.module.ts：

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

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

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

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

export class AppRoutingModule { }

app.component.html：

这将确保路由视图只显示在 中，而不会影响整个应用程序。