Typescript 如何在应用程序首次加载而不是在5中加载appComponent时显示登录组件

我是Angular 5的新手，我想在应用程序打开时显示登录页面

现在我正在显示appComponent，它有工具栏和侧边导航栏。但是当用户加载应用程序时，我想显示一个登录屏幕，如果登录成功，那么只有用户允许查看主页

如果我将AppComponent设置为登录组件，则无法根据用户选择的菜单在主页中加载不同的组件

app.component.html

<mat-sidenav-container fullscreen>
    <mat-sidenav #sidenav class="app-sidenav">
        <mat-nav-list>
            <a mat-list-item routerLink="/home" routerLinkActive="active-list-item">
                <h2 matLine>Home</h2>
                <mat-icon matListIcon>home</mat-icon>
            </a>
            <a mat-list-item routerLink="/account" routerLinkActive="active-list-item">
                <h2 matLine>Account</h2>
                <mat-icon matListIcon>person</mat-icon>
            </a>
            <a mat-list-item routerLink="/settings" routerLinkActive="active-list-item">
                <h2 matLine>Settings</h2>
                <mat-icon matListIcon>settings</mat-icon>
            </a>
        </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content>
        <mat-toolbar color="primary" class="mat-elevation-z3">
            <button mat-icon-button (click)="sidenav.toggle()">
        <mat-icon>menu</mat-icon>
      </button>
      My App
    </mat-toolbar>
    <div class="app-content">
      <router-outlet></router-outlet>  // router-outlet
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

当前，当url为“”时，我重定向到应用程序根目录，而我希望重定向到登录

---

有谁能帮我解决这个问题。

对于您的情况，使用防护装置将是更有效的解决方案。因为您想要实现的是阻止对AppComponent的任何匿名调用

创建一个保护，它将检查用户是否经过身份验证。将防护应用于AppComponent。如果用户未通过身份验证，请在您的保护中重定向到您的LoginComponent

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';

@Injectable()
export class LoginGuard implements CanActivate {
    constructor(private router: Router) {}

    canActivate() {
        //authentication check logic
    }
}

---

您可以在canActivate函数中实现身份验证检查逻辑。

我如何首先打开登录组件而不是app.component@SerdarAs据我所知，在appcomponent中，如果@SerdarIn app.module您使用bootstrap属性定义启动组件，请更正我的错误。您可以使用登录组件更改此设置。这会将您的应用程序起点更改为登录组件。但我还是建议你在你的案件中使用守卫。您好，朱找到正确答案了吗？如果是的话，你能把你的答案贴出来吗

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';

@Injectable()
export class LoginGuard implements CanActivate {
    constructor(private router: Router) {}

    canActivate() {
        //authentication check logic
    }
}