angular - 哪种方式更适合我的登录表单位于我的角度材料 sidenav 之外

Question

在我的应用程序中，我有材料 sidenav 组件，所有其他组件都在这个 sidenav 内，如下例所示：

    <!-- this is inside my app.component.ts -->
    <app-side-nav *ngIf="loggedIn">
        <router-outlet></router-outlet>
    </app-side-nav>

问题是我希望我的登录表单组件位于 sidenav 之外，所以我有两种方法：

• 这是第一个 ：

    <!-- also in my app.component.ts
     use variable loggedIn to see if the user is logged in or not -->

    <div *ngIf="!loggedIn" class="login-app">
        <app-authentication></app-authentication>
    </div>
    <!-- if the user loggedIN -->
    <app-side-nav *ngIf="loggedIn">
        <router-outlet></router-outlet>
    </app-side-nav>

• 这是第二个

    <div *ngIf="!loggedIn" class="login-app">
        <router-outlet></router-outlet>
    </div>
    <!-- if the user loggedIN -->
    <app-side-nav *ngIf="loggedIn">
        <router-outlet></router-outlet>
    </app-side-nav>

在第二个中，我将路由用于登录表单，并将 Guard 用于其他组件，
我的问题是：

1. 最好的方法是什么？
2. 有没有更好的方法以安全的方式做到这一点？

PS：这两种方法都很好用！！

标签： angularangular-materialangular8