Angular8路由器不适用于某些组件-退回到索引

Question

我的角度路由器遇到了一些问题。我有一个包含一些组件的项目：project hierarchy现在，我可以从app.component路由到login.component，并从那里也路由到overview.component。很快，这三个组件之间的路由就可以了！

但是现在我添加了logbook.component并想路由至此，它总是退回到app.component不管我直接将其放入URL路径还是在click方法中使用router.navigate(['logbook']);都没有关系。网址显示该应用程序尝试路由到/logbook，但随后我再次看到了app.component ...

这是我的app-routing.module.ts：

const routes: Routes = [
  {
    path: '',
    component: AppComponent
  },
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'overview',
    component: OverviewComponent
  },
  {
    path: 'logbook',
    component: LogbookComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

这是我的logbook.component（刚刚添加）：

@Component({
  selector: 'app-logbook',
  templateUrl: './logbook.component.html',
  styleUrls: ['./logbook.component.less']
})
export class LogbookComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }
}

最后是overview.component，我想从中路由到logbook.component：

@Component({
  selector: 'app-overview',
  templateUrl: './overview.component.html',
  styleUrls: ['./overview.component.less']
})
export class OverviewComponent implements OnInit {

  constructor(public router: Router, private loginService: LoginService) { }

  currentUser: string;
  isAdmin: boolean = false;

  ngOnInit(): void {
    if (!this.loginService.checkLogin()) { // Check if user is logged in
      this.router.navigate(['login']);
    }
    this.checkUserAdmin();
    this.currentUser = localStorage.getItem('user_surname') + ' ' + localStorage.getItem('user_name');
  }

  checkUserAdmin(): void {
    if (!localStorage.getItem('trainer')) {
      return;
    }
    const item: string = localStorage.getItem('trainer');
    if (item === '1') {
      this.isAdmin = true;
    }
  }

  routeMethod(): void { //called on click in html component
    this.router.navigate(['logbook']);
  }
}

我希望这个问题以前没有得到回答，但是我在互联网上找不到任何类似的东西。如果您能提供帮助，那就太好了！谢谢：）

GitLab Repo目前可读取：https://gitlab.com/andreas.rainer5301/fab-lerntagebuch/

Answer 1

[我认为您的路由工作正常，但是您的app.component.html用“ resetScreen”类覆盖了屏幕。请记住，app.component.html是根组件，始终显示。

显示overview.component.html的唯一原因是因为它在路由时用“ app.component.html”类覆盖了overview。

您可能希望有条件地显示“ resetScreen”元素。

app.component.html：

<div *ngIf="!isLoggedIn" class="resetScreen">
  <div class="btn_reset" (click)="showLoginScreen()"></div>
  <div class="btn_start" (click)="showLoginScreen()"></div>
</div>
<router-outlet></router-outlet>

app.component.ts：

export class AppComponent implements OnInit {

  constructor(public router: Router, private loginService: LoginService) { }

  ngOnInit() {
    if(this.isLoggedIn) {
      this.router.navigate(['overview']);
    }
  }

  showLoginScreen(): void {
    this.router.navigate(['login']);
  }

  get isLoggedIn(): boolean {
    return this.loginService.checkLogin();
  }

}

或者也许将html元素从app.component.ts移到其自己的路由组件中，与其他组件一样。