页面特定组件Angular 7答案

【问题标题】：Page Specific Components Angular 7页面特定组件Angular 7
【发布时间】：2020-02-08 06:31:58
【问题描述】：

我有一个类似的项目结构

--Home 
   -- About

在主页中，我有一个标题栏和一个像这段代码一样的图片

home.component.html

<nav class="navbar navbar-expand-lg navbar-light bg-light">
      <li class="nav-item">
                <a class="nav-link"  routerLink="/about">About</a>
        </li>
  </nav>
              <router-outlet></router-outlet>

<div class="jumbotron jumbotron-fluid">
        <div class="container">
          <h1 class="display-4">Welcome to my site </p>
        </div>
      </div>

当我单击关于按钮时，由于路由器出口组件，页面加载导航栏 + 关于组件数据的数据很好，但伴随着 Jumbotron 显示“欢迎消息”。如何避免关于页面中的欢迎信息？

P.S：我可以使用 *ngIF="somevalue" 并在主页而不是其他页面中分配该值。但是有没有其他有效的方法来达到同样的效果。

【问题讨论】：

标签： angular

【解决方案1】：

你可以将 router-outlet 和 nav bar 移动到顶级 app.component，将 jumbotron 留在 home.component 中。

【讨论】：

谢谢，但我把那个 jumbotron 移到了新组件。标记为已接受，因为您的也可以使用:)
我更新了路由器组件并将主页重定向到该组件{path: '', component: HomeComponent, children:[ { path: '', redirectTo : 'welcome', pathMatch: 'full' }, { path: 'welcome', component: WelcomeComponent}