Angular всегда перенаправляет на путь по умолчанию при перезагрузке страницы - PullRequest
Новая
       31

Angular всегда перенаправляет на путь по умолчанию при перезагрузке страницы

0 голосов
/ 06 ноября 2019

Я разрабатывал новое приложение, используя Angular и при повторной загрузке, приложение всегда загружает путь по умолчанию.

Вот мой массив маршрутов в модуле App. 

const routes: Route[] =[
  {
    path: "products",
    loadChildren: "./products/products.module#ProductsModule"
  }
  ,{
    path: "books",
    loadChildren: "./books/books.module#BooksModule"
  }
  ,{
    path: "clocks",
    loadChildren: "./clocks/clocks.module#ClocksModule"
  }
  ,{
    path: "",
    redirectTo: "products",
    pathMatch: "full"
  }
];

Моими тремя модулями являются продукты, книги и часы.

При первой загрузке приложения URL-адрес localhost: 4200 / products. (Как и ожидалось). Затем я перехожу к localhost: 4200 / products с помощью навигационной панели. 

<ul class="nav nav-pills mt-5">
  <li class="nav-item">
    <a class="nav-link" routerLink="products" routerLinkActive="active">Products</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" routerLink="books" routerLinkActive="active">Books</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" routerLink="clocks" routerLinkActive="active">Clocks</a>
  </li>
</ul>

При нажатии перезагрузки с пути localhost: 4200 / books всегда загружается localhost: 4200 / products, URL-адрес по умолчанию,Но мы знаем, что URL localhost: 4200 / books должен быть загружен.

Я перебирал различные угловые ссылки и сайт Angular IO, но я не могу понять это.

Любая помощь здесь очень ценится.

Ответы [ 4 ]

1 голос
/ 06 ноября 2019

Вы неправильно вводите данные для routerLink! Попробуйте это. 

<ul class="nav nav-pills mt-5">
  <li class="nav-item">
    <a class="nav-link" [routerLink]="['/products']" routerLinkActive="active">Products</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" [routerLink]="['/books']" routerLinkActive="active">Books</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" [routerLink]="['/clocks']" routerLinkActive="active">Clocks</a>
  </li>
</ul>

Это должно работать.

1 голос
/ 06 ноября 2019

Вы можете попробовать: 

<ul class="nav nav-pills mt-5">
  <li class="nav-item">
    <a class="nav-link" routerLink="/products" routerLinkActive="active">Products</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" routerLink="/books" routerLinkActive="active">Books</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" routerLink="/clocks" routerLinkActive="active">Clocks</a>
  </li>
</ul>
0 голосов
/ 08 ноября 2019

Спасибо за ваш ценный вклад и отзывы. Маршруты и ссылки, которые я указал в этом вопросе, работают нормально.

Ошибка, которую я сделал, я добавил this.router.navigateByUrl () в ngOnInit () первого загружаемого компонента,Это привело к проблеме.

Еще раз спасибо всем за ваш вклад.

0 голосов
/ 06 ноября 2019

Я полагаю, что проблема связана с вашей ссылкой. Всплеск отсутствует.

попробуйте так: 

<a class="nav-link" routerLink="/books" routerLinkActive="active">Books</a>
...