Angular 如何在'/关于'；角6的路由器？

这是一个基本的应用程序，默认情况下我有AppComponent。我使用--routing标志为Angular 6应用程序生成路由。 我已经生成了“AboutComponent”来放置关于我们的页面内容。但是，除了About Us页面内容外，“/About”还显示AppComponent内容。如下

欢迎来到主页。 这是关于我们的网页

如何避免“/about”路由中的AppComponent/任何其他组件内容

我对“/contact”也有同样的问题

欢迎浏览网页 这是联系我们页面

我们是否应该在AppComponent中保留主页内容？请澄清这一点，提前谢谢

app.component.html：

<div class="container">
<div class="row">
    <div class="col-md-12">
        <h1>Welcome to Home Page</h1>
    </div>
</div>

欢迎来到主页

关于.component.html

<div class="container">
<div class="row">
    <div class="col-md-12">
        <h1>About Us</h1>
    </div>
</div>

<router-outlet></router-outlet>

关于我们

---

问题的原因是

的定位。查看您的描述，您的主页中似乎有路由器插座。因此，在路由时，主页将保持不变。如果您想随主页一起更改完整视图，则必须在主页的父级中提供路由器出口，并且还必须为主页提供有效路由
 我不太确定您的代码中有什么错误，因为我需要更多的信息，但angular中的组件布线就是这样完成的

在app.module.ts中，指定路径和组件名称，并将其添加到import语句中

import {Router, RouterLink,Routes, RouterModule, RouterLinkActive} from '@angular/router';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutUsComponent } from './about/aboutus.component';

const routes: Routes =
[
  {path:'Home', component: HomeComponent},
  {path:'AboutUs',component:AboutUsComponent},
  {path: '', redirectTo: 'Home', pathMatch: 'full' } <== this code makes sure Home component opens by default

]

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutUsComponent,    
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes),
  ],

从'@angular/Router'导入{Router，RouterLink，Routes，RouterModule，RouterLinkActive}；
从“./app.component”导入{AppComponent}；
从“./home/home.component”导入{HomeComponent}；
从“./about/aboutus.component”导入{AboutUsComponent}；
常量路线：路线=
[
{路径：'Home'，组件：HomeComponent}，
{路径：'AboutUs'，组件：AboutUsComponent}，
{path:''，重定向到：'Home'，pathMatch:'full'}我知道了。看来，我不应该将AppComponent用作主页。我从AppComponent html中删除了主页内容（只保留了标记）现在它正在工作。'/about'只有about内容，'/contact'只有contact内容。我创建了新的HomeComponent，放置了我所有的主页内容，并将其设置为默认路径。感谢您的回答，他们对我很有帮助。
您能发布appComponent和homepageComponent的.ts文件吗？问题似乎是由于放置位置造成的我已经在AppComponent（主页）和AboutComponent（关于我们的页面）的问题中添加了代码。太好了！你可以投票决定答案并宣布它被接受，这样人们就可以确定解决方案是什么。