时间戳

首页 > 解决方案 > 页面特定组件Angular 7

angular - 页面特定组件Angular 7

问题描述

我有一个与此类似的项目结构

--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 显示“欢迎消息”。如何避免关于页面中的欢迎信息？

PS：我可以使用 *ngIF="somevalue" 并在主页而不是其他页面中分配该值。但是有没有其他有效的方法来实现同样的目标。

标签： angular

解决方案

您可以将路由器插座和导航栏移动到顶级 app.component，将 jumbotron 留在 home.component 中。

推荐阅读