Question

我有多个组件，如登录，用户，客户端等。我想在登录前隐藏导航，并且只有在登录成功后才能启用导航。

目前我正在分别在所有组件中添加导航。那是

登录导航：

<nav class="navbar navbar-default">
    <div id="navbar" class="navbar-collapse collapse">

        <ul class="nav navbar-nav navbar">
            <h1>My App</h1>
        </ul>
    </div>
    <!-- </div> -->
</nav>

登录成功后

<nav class="navbar navbar-default">
    <ul class="nav navbar-nav navbar-left">
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"> Admin </a>
            <ul class="dropdown-menu">
                <li>
                    <h6> <a href="register">Register Users</a> </h6>
                    <h6> <a href="users">Display Users</a> </h6>
                </li>
            </ul>
        </li>
    </ul>
</nav>

还有更好的方法吗？

Answer 1

像这样定义app.component：

<router-outlet></router-outlet>

然后像这样定义shell.component：

<mh-menu></mh-menu>

<div class='container'>
    <router-outlet></router-outlet>
</div>

然后，没有菜单应该显示的任何内容都可以路由到app.component的路由器插座。

应该与菜单一起显示的任何内容都可以路由到shell组件的路由器插座。

这样的事情：

    RouterModule.forRoot([
        {
            path: '',
            component: ShellComponent,
            children: [
                { path: 'welcome', component: WelcomeComponent },
                { path: 'movies', component: MovieListComponent},
                { path: '', redirectTo: 'welcome', pathMatch: 'full' },
            ]
        },
        { path: 'login', component: LoginComponent }
        { path: '**', component: PageNotFoundComponent }
    ])

这是一张图片：

我在这里有一个更完整的例子：https://github.com/DeborahK/MovieHunter-routing

Answer 2

首先，您应该设置状态（已记录或未记录），然后在导航栏组件中检查该值，并将其公开给视图，并使用简单的* ngIf完成所有操作。

<ul *ngIf='isLogged()' class="nav navbar-nav navbar-left">
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"> Admin </a>
            <ul class="dropdown-menu">
                <li>
                    <h6> <a href="register">Register Users</a> </h6>
                    <h6> <a href="users">Display Users</a> </h6>
                </li>
            </ul>
        </li>
    </ul>

在Angular 2中基于用户身份验证动态添加导航菜单的最佳方法

2 个答案: