Блог

Главная - Вопросы по программированию - Угловая маршрутизация и навигация

Угловая маршрутизация и навигация

#angular #routes #angular-routing #navigateurl

Вопрос:

Мой app.component.html очень легкий

 <div class="landing-page">
   <div class="main">
      <router-outlet></router-outlet>
      <div class="footer"> 
         <div class="logo-wrapper">
            <a routerLink="/"><img src="assets/images/logo.png" srcset="assets/images/logo@2x.png 2x,assets/images/logo@3x.png 3x" /></a>
         </div>
      </div>
   </div>
</div>

У меня есть следующие маршруты, определенные в AppRoutingModule :

 const routes: Routes = [    
  { path: 'book/:id', component: BookComponent },
  { path: '**', component: LandingPageComponent }
];

по-моему LandingPageComponent , я перехожу к book подобному:

 constructor(private router: Router) { 
}

OpenBookComponent(id){        
    this.router.navigate(["/book", id], {skipLocationChange: true});
}

До этого момента все работает идеально.

Проблема возникает при возвращении на главную страницу, перейдя на ["/"]

Как при повторном нажатии < в браузере, так и при программной попытке перейти по BookComponent базовой ссылке, в адресной строке отображается полный путь (т. е.: http://localhost:4200/book/123 ), и в результате отображается только нижний колонтитул

мой код, возвращающийся обратно, таков BookComponent :

 constructor(private route: ActivatedRoute, private router: Router) { 
    
}
ngOnInit() {        
    this.id = this.route.snapshot.paramMap.get('id');       
}
closeBook(){      
   this.router.navigate(["/"], {skipLocationChange: true});
}

Как я могу очистить все параметры с адреса при возвращении, чтобы он оставался просто / или http://localhost:4200 ?

Ответ №1:

Вам не нужно удалять параметры. Вы должны просто добавить новый маршрут, подобный этому:

 const routes: Routes = [
  { path: 'book/:id', component: BookComponent },
  { path: '', component: LandingPageComponent },
  { path: '**', component: LandingPageComponent }
];

Теперь , если вы хотите перейти "['/']" , вы можете написать это так, в качестве примера:

 <a [routerLink]="['/']" class="nav-link active">Back</a>

И теперь он будет отображать компонент, где вы написали позади '' в массиве угловых маршрутов, в данном случае LandingPageComponent .

Метки: