Angular8 Router не работает для некоторых компонентов - возвращается к индексу - PullRequest
Новая
       31

Angular8 Router не работает для некоторых компонентов - возвращается к индексу

1 голос
/ 23 марта 2020

У меня есть некоторые проблемы с angular роутером. У меня есть проект с несколькими компонентами: иерархия проектов Теперь я могу маршрутизировать от app.component до login.component и оттуда также до Overview.component. Короче говоря, маршрутизация между этими 3 компонентами работает!

Но теперь я добавил logbook.component и хочу перейти к нему, он всегда возвращается к app.component. Не имеет значения, помещаю ли я его в URL путь или если я использую router.navigate(['logbook']); внутри метода щелчка. URL показывает, что приложение пытается перенаправить на /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 {
  }
}

И, наконец, компонент review.com, откуда я хочу направить на 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']);
  }
}

Надеюсь, на этот вопрос раньше не было ответа, но я не смог найти ничего похожего в inte rnet. Было бы здорово, если бы вы могли помочь! Спасибо:)

GitLab Repo открыт для чтения в данный момент: https://gitlab.com/andreas.rainer5301/fab-lerntagebuch/

1 Ответ

1 голос
/ 24 марта 2020

Я думаю, что ваша маршрутизация работает правильно, но ваш app.component.html закрывает экран классом "resetScreen". Помните, что app.component.html является компонентом root и отображается всегда.

Единственная причина, по которой 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 в его собственный маршрутизируемый компонент, как и другие.

...