Angular 8 Router 不适用于某些组件 - 回退到索引

Question

我在使用 angular 路由器时遇到了一些问题。我有一个包含几个组件的项目：project hierarchy 现在我可以从 app.component 路由到 login.component，然后从那里路由到 overview.component。很快，这 3 个组件之间的路由就可以工作了！

但现在我添加了 logbook.component 并想路由到这个，它总是退回到 app.component 直接将它放入 URL 路径或者在单击方法中使用 router.navigate(['logbook']); 都没有关系。 url 显示该应用程序尝试路由到 /logbook 但后来我又看到了 app.component...

这是我的应用-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”class 覆盖屏幕。请记住，app.component.html 是根组件并且始终显示。

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

您可能希望有条件地显示“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 移动到它自己的路由组件中，就像其他组件一样。

Angular 8 Router 不适用于某些组件 - 回退到索引

Angular8 Router doesn't work for some components - falls back to index

routing

frontend

router

typescript

angular