Angular: 7.2.14 - Еще одна ссылка на роутер не работает

Question

Извините, что оживил вопрос.Я использую Angular 7, и я пытаюсь использовать Router Link.

Это мой app-routing-module

const routes: Routes = [
  { path: 'locations'           , component : LocationManagerComponent },
  { path: 'locations/create'    , component : CreateEditLocationComponent },
  { path: 'locations/create/:id', component : CreateEditLocationComponent },

  { path: '404'                 , component : PageNotFoundComponent},
  { path: '**'                  , redirectTo: '/404'}
];

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

Это роутер:

<a [routerLink] = "['/locations']" routerLinkActive="active">  test link </a>

КогдаЯ нажимаю на ссылку, ничего не происходит.URL в браузере изменен, но компонент не загружен.Если я нажму F5, компонент будет загружен, и с этого момента ссылка на маршрутизаторы будет работать.

Я пробовал много решений для работы со стеком, например, написание ссылки в любом варианте, например

<a routerLink="/locations" ...
<a [routerLink]= ['/locations'] ...
<a [routerLink]= "['/locations']" ...

С атрибутом LinkAttive или без него.Помещение

<base href="/">

в index.html и т. Д. ...

По этой теме: TOPIC Я пытался включить Router в свой компонент Layout:

import { Component, OnInit }  from '@angular/core';
import { ActivatedRoute }     from '@angular/router';

@Component({
  selector: 'app-layout',
  templateUrl: './layout.component.html',
  styleUrls: ['./layout.component.css']
})
export class LayoutComponent implements OnInit {
  constructor(
    private route           : ActivatedRoute
  ) { }
[...]

но ничего не меняется.

Странно то, что после F5 все маршруты работают, даже маршрут к компоненту, который еще не загружен.

В этой теме ТЕМА 2 пользователь разрешил удаление класса css.Я пытался поместить свою ссылку в полностью очищенный компонент HTML, и он не работает (но все еще работает после обновления).

<p>
  dashboard works!
  <a routerLink = '/locations' routerLinkActive="active">  test link </a>
</p>

ОБНОВЛЕНИЕ: Это layout.component, где находится тег маршрута.Я не могу понять, как получить Sidenav, не имея внутри него выходного маршрута.

<mat-sidenav-container fullscreen>

  <mat-sidenav #sidenav mode="over">
    <div class="profile_container">
        <span> User Name </span>
    </div>
    <mat-nav-list>
      <mat-list-item><a [routerLink]="['/locations']" routerLinkActive="active"> Locations
    </mat-nav-list>
  </mat-sidenav>
    <mat-sidenav-content>
    <app-header  (toggleSidenav)="sidenav.toggle()"></app-header>
    <div style="padding: 20px 10px 10px 20px;">
      <router-outlet></router-outlet>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

Answer 1

Я понял, в чем причина проблемы, но не могу понять, почему, и я не смог воспроизвести в StackBlitz.

Это был мой app.component.html, корень всего приложения:

<main>
  <!-- Showing All Site Pages -->
  <span *ngIf='isLogged()'>
    <app-layout style="height:100%"></app-layout>
  </span>  
  <!-- Showing Login Page -->
  <div *ngIf='!isLogged()'>
    <router-outlet></router-outlet>
  </div>
</main>

Код компоновки приложения указан выше.

ЭТО НЕ РАБОТАЕТ!

Я изменил его просто:

<main> 
  <app-layout style="height:100%"></app-layout>
</main>

Как вы видите изна мой вопрос, у Layout есть свой роутер-розетка.Я думаю, что проблема заключается в теге два маршрутизатора-розетки.Возможно, Angular не может понять, что они взаимоисключающие.Возможно, когда я по какой-то причине нажимал на меню, Angular обновлял «первый» обнаруженный маршрутизатор и только после обновления (F5), когда isLogged уже был запущен и макет приложения был загружен напрямую, Angular знает, какойrouter-outlet для использования.

В новом способе все страницы, даже Login, должны быть дочерними по отношению к AppLayout, поэтому каждый компонент Layout, который существует только после регистрации, должен быть вручную скрыт с помощью * ngIf = '! isLogged() 'Небольшая цена, чтобы заплатить, чтобы иметь маршруты работают.

Answer 2

Примечание : этот ответ основан на предыдущей версии вашего вопроса до того, как вы добавили код layout.component.html .Таким образом, вместо компонента макета я использую упрощенный компонент панели мониторинга.

Для меня ниже работает Angular 8.1.

app.component.html

<app-dashboard></app-dashboard>

означает, что DashboardComponent содержится внутри (является дочерним элементом) AppComponent.Без изменений по умолчанию app.component.ts

dashboard.component.html

<p>
    dashboard works!
    <a routerLink = '/locations' routerLinkActive="active">
        Locations test link </a>
</p>
<p><a routerLink = '/locations/create' routerLinkActive="active">
    Locations/create </a></p>
<p><a routerLink = '/locations/create/:id' routerLinkActive="active">
    Locations/create/:id </a></p>

<p>router-outlet is below:</p>
<router-outlet></router-outlet>

Все ссылки работают как по клику, так и при вводе URL-адреса вручную (Например: http://localhost:4200/locations/create/:id) в браузере и с перезагрузкой (F5).

Новые компоненты

Сгенерировано с помощью команды ng generate component:

• Панель инструментов
• LocationManager
• CreateEditLocation
• PageNotFound

app-routing-module.ts

То же, что и ваш файл, нотакже добавлены операторы импорта для вновь созданных компонентов.