RouterActiveLink не работает с routerLink в ng-шаблоне - PullRequest
Новая
       10

RouterActiveLink не работает с routerLink в ng-шаблоне

0 голосов
/ 22 мая 2018

Я создал новое приложение в «Angular 2» из трех компонентов:

  • AppComponent
  • Test1Component
  • Test2Component

Существует только один модуль ( AppModule ), который загружает AppComponent, объявляет AppComponent, Test1Component и Test2Component и импортирует RouterModule.forRoot(appRoutes).

Это appRoutes : 

const appRoutes: Routes = [

  {
    path: '',
    component: AppComponent,
    pathMatch: 'full',
},
  {
      path: 'test1',
      pathMatch: 'full',
      component: Test1Component
  },
  {
      path: 'test2',
      pathMatch: 'full',
      component: Test2Component
  }
];

Это app.component.html : 

<h1>Test routerLinkActive</h1>
<ul>
  <li routerLinkActive="active">
      <a routerLink="/test1">Link 1</a>       
  </li>
  <li routerLinkActive="active">
      <a routerLink="/test2">Link 2</a>          
  </li>
</ul>
<router-outlet></router-outlet>

В app.component.css есть: 

.active>a{
    background: red;
}

Работает хорошо, и когда я нажимаю на ссылки в ul, angular загружает нужный компонент, показывает его содержимое (простой html текст: "компонент работает") и добавляет красный фон к нажатой ссылке.

Теперь, если я помещаю элемент в тег и ссылаюсь на него в * ngIf, компоненты Test1 и Test2 загружаются по щелчку ссылки, но фон не добавляется.

Разбитая версия: 

<h1>Test routerLinkActive</h1>
<ng-template #tpl1>
    <a routerLink="/test1">Link 1</a>
</ng-template>
<ng-template #tpl2>
    <a routerLink="/test2">Link 2</a>
</ng-template>
<ul>
  <li routerLinkActive="active">     
    <div *ngIf="1===1;then tpl1 else tpl1"></div>
  </li>
  <li routerLinkActive="active">      
      <div *ngIf="1===1;then tpl2 else tpl2"></div>
  </li>
</ul>
<router-outlet></router-outlet>

Почему?

PS: условие в * ngIf только для примера

1 Ответ

0 голосов
/ 22 мая 2018

Вы можете напрямую использовать * ngIf и routerLink в теге li

Like

<li routerLinkActive="active" *ngIf="" routerLink="/pages/page"> <a>tab name</a> </li>

...