Изо всех сил, чтобы перейти к дочернему маршруту Angular

Question

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

const routes: Routes = [
  { path: 'login', component: LoginComponent, pathMatch: 'full' },
  { path: 'dashboard', component: AppContentComponentComponent, pathMatch: 'full', children: [
    { path: 'dashboard', outlet: 'siteContent', component: UserDashboardComponent, pathMatch: 'full' },
    { path: 'person/edit/:personId', outlet: 'siteContent', component: PeopleEditComponent },
    { path: 'person/add', component: PeopleEditComponent },
    { path: 'person', outlet: 'siteContent', component: PeopleListingComponent, pathMatch: 'prefix' },
    { path: '', component: UserDashboardComponent, outlet: 'siteContent', pathMatch: 'full' },
  ]},
  { path: '', redirectTo: '/login', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];

Login Компоненты router-outlet определены в AppComponent следующим образом:

<router-outlet></router-outlet>

Затем 'Панель инструментов 'должна отображаться в другом router-outlet с другим стилем.Этот router-outlet определен в AppContentComponent следующим образом:

<div class="side-menu">
  <app-nav-bar></app-nav-bar>
</div>
<div class="content-wrapper">
    <router-outlet name="siteContent"></router-outlet>
</div>

Моя проблема в том, что после успешной аутентификации пользователя я могу перейти к маршруту «приборной панели», и теперь я могу видеть свойside nav bar, что анонимный пользователь не должен видеть.Проблема, с которой я сталкиваюсь, заключается в том, что я не могу перейти ни к одному из определенных дочерних маршрутов.

Я пытался установить свойство outlet на маршрутах и ​​пробовал разные способы маршрутизации, например:

<a href="#" routerLink="/person" routerLinkActive="active">People</a>
<a href="#" routerLink="./person" routerLinkActive="active">People</a>
<a href="#" routerLink="../person" routerLinkActive="active">People</a>

Что мне здесь не хватает?

Answer 1

Атрибут routerLink фактически является входом для директивы (поэтому обязательно добавьте окружающие квадратные скобки) и ожидает что-то для разыменования, как переменная.Вы можете обойти бит разыменования, добавив одинарные кавычки вокруг вашей жестко закодированной строки, например: [routerLink]="'person'" или [routerLink]="['person']".Или просто привяжите его к переменной файла ts и разрешите разыменование, например: [routerLink]="personUrl".

Answer 2

для примера это должно быть так:

<a routerLink="/dashboard/person" routerLinkActive="active">People</a>

Answer 3

удалить тег в атрибуте "href =" # ".