Question

我正在构建一个有角度的Web应用程序，我有一个导航栏和侧边栏组件，它们各自的选择器标签用于将其呈现给app.component.html。然后我有一个登录组件，我使用<router-outlet></router-outlet>来呈现它。因此，当我加载我的应用程序时，默认路径是登录组件，我希望Navbar和Sidebar组件在登录页面上不初始化或在成功登录时重新初始化。这是因为我必须在导航栏上显示名称，该名称存储在sessionStorage中，该名称在登录页面上返回null（会话尚未设置）。我已经尝试使用css将其显示为无，但导航栏组件仍在登录页面上初始化。希望我能找到答案。

App.Component.html

<!-- Here the current details of the user appears and update can be made-->
<div class="wrapper">
    <div class="sidebar" data-color="green" data-image="assets/img/olam.png">
        <!--
     Tip 1: you can change the color of the sidebar using: data-color="blue | azure | green | orange | red | purple"
     Tip 2: you can also add an image using data-image tag
 -->
        <div class="sidebar-wrapper">
            <app-sidebar></app-sidebar>
        </div>
    </div>
    <div class="main-panel">
        <nav class="navbar navbar-default navbar-fixed">
            <app-navbar></app-navbar>
        </nav>
        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-2"></div>
                        <router-outlet></router-outlet>
                    <div class="col-md-2"></div>
                </div>
            </div>
        </div>
        <app-footer></app-footer>
    </div>
</div>

Answer 1

一个简单的垃圾解决方案是在两侧和导航栏上使用*ngIf="isLoggedIn"。但是，不要使用这个，这个是邪恶和丑陋的。

解决此问题的正确方法是利用路由器的子路由功能。而不是使用相同的模板用于整个应用程序，使用主要级别路由来保持登录和限制区域。

例如，假设您的app.component.html只有router-outlet这样：

App.Component.html

<div class="wrapper">
    <router-outlet></router-outlet>
</div>

此外，您需要使用所需的内容增加登录页面模板：

LoginPage.Component.html

<div class="main-panel">
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-2"></div>
                    <router-outlet></router-outlet>
                <div class="col-md-2"></div>
            </div>
        </div>
    </div>
    <app-footer></app-footer>
</div>

请注意，如果您愿意，可以为登录页面添加自定义栏。此外，您可以使用子路由设置在登录，注册和记住密码之间切换。

最后，您要创建restrict are模板：

Restrict.Component.ts

<div class="sidebar" data-color="green" data-image="assets/img/olam.png">
    <div class="sidebar-wrapper">
        <app-sidebar></app-sidebar>
    </div>
</div>

<div class="main-panel">

    <nav class="navbar navbar-default navbar-fixed">
        <app-navbar></app-navbar>
    </nav>

    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-2"></div>
                    <router-outlet></router-outlet>
                <div class="col-md-2"></div>
            </div>
        </div>
    </div>

    <app-footer></app-footer>
</div>

在此子路径中，<router-outlet></router-outlet>将切换到限制区域的子页面;例如：仪表板，用户，费用和帐户。

路由树：

+- /
    |
    +- /login
    |    |
    |    +- /sign-in
    |    |
    |    +- /sign-up
    |    |
    |    +- /recover-password
    |
    +- /restrict
        |
        +- /dashboard
        |
        +- /users
        |
        +- /fees 
        |
        +- /accounts

如何重新初始化Angular 4子组件

1 个答案: