如何在 Angular 6 的“/about”路由器中仅显示关于组件内容？

Posted 2023-03-13

【中文标题】如何在 Angular 6 的“/about”路由器中仅显示关于组件内容？

【英文标题】：How to display only About Component Content in '/about' Router of Angular 6?

【发布时间】：2019-03-24 11:33:40

【问题描述】：

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

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

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

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

欢迎来到首页 这是联系我们的页面。

我们是否应该将 HomePage 内容保留在 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>

【问题讨论】：

能否把appComponent和homepageComponent的.ts文件贴一下，问题好像是router-outlet的位置问题

我在问题中添加了 AppComponent（主页）和 AboutComponent（关于我们页面）的代码。

【参考方案1】：

我想通了！看来，我不应该将 AppComponent 用作主页。我从 AppComponent html 中删除了主页内容（只保留了标签），它现在可以工作了。 “/about”只有关于内容，“/contact”只有联系内容。我创建了新的 HomeComponent 并放置了我所有的主页内容并将其设置为默认路由。感谢您的回答，他们很有帮助。

【讨论】：

太棒了！您可以对答案进行投票并将其声明为已接受，这样人们就可以确定解决方案是什么。

【参考方案2】：

我不确定您的代码有什么问题，因为我需要更多信息，但是 Angular 组件的路由是这样完成的。

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

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),
  ],

然后在你的 app.component.html 中

<router-outlet></router-outlet>

原因是您的 app.component.ts 有一个已定义的标签，例如 <app-root></app-root>，它位于您的 index.html 文件中，因此它会不由自主地呈现。因此，我们使用 app.component.html 作为文件来放置我们希望始终渲染的那些元素，<router-outlet> 将渲染那些可能会在导航中改变的元素

【参考方案3】：

问题的原因是<router-outlet> 的定位。查看您的描述，您的主页中似乎有路由器插座。因此主页在路由时将保持不变。如果要随主页一起改变整个视图，则必须在主页的父级中提供router outlet，并且还必须为主页提供有效的路由！