在 angular 2 中显示组件时如何绕过 routher-outlet？

Question

我是 angular 2 的新人。这可能是非常基本的问题，但我有仪表板页面和登录页面。仪表板页面有一个 header 页面和菜单，登录页面是带有登录表单的完整登录页面。 我的问题是： 当显示登录页面时，它会显示仪表板 header 菜单，因为我在路由器出口之前设置了 app-header，并且还设置了 login-app。在显示登录页面之前可以通过仪表板元素吗？ app.component.html

<header-app></header-app>
<div class="container">
    <router-outlet></router-outlet>
</div>

和login.component.html只是登录表单和 header.component.html

<nav class="navbar navbar-fixed-top">
<div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header col-md-8 col-sm-6 col-xs-6">
        <div class="logo">
            <a href="index.html"><img class="img-responsive" src="images/logo.png"></a>
        </div>
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" routerLink="/Home">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" routerLink="/Login">Login</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" routerLink="/Employee">Employee</a>
            </li>
        </ul>
    </div>
    <div class="text-right col-md-4 col-sm-6 col-xs-6">
        <button class="sign_btn">Sign Up</button>
    </div>
</div>

但它是这样显示的 http://prntscr.com/ks8xjf 提前致谢。

Answer 1

从 app.component.html 中删除应用程序 header 组件并将其放置在 dashboard.component.html 中。 app.component.html 应该只有 rouert outlet

app.component.html

<router-outlet></router-outlet>

dashboard.component.html

<header-app></header-app>
<other-things></other-things>
...
...
<footer></footer>

在 angular 2 中显示组件时如何绕过 routher-outlet？

How to by pass routher-outlet when showing a component in angular 2?

angular

angular5