Javascript RouterActiveLink不'；不能在ng模板中使用routerLink

我在“Angular 2”中创建了一个新应用程序，其中包含三个组件：

• 应用组件
• 测试1组件
• Test2组件

只有一个模块（AppModule）用于引导AppComponent、声明AppComponent、Test1组件和Test2组件以及导入

RouterModule.forRoot（批准）

这是批准的：

const appRoutes: Routes = [

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

<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.html：

const appRoutes: Routes = [

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

<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>

它工作得很好，当我点击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>

testrouterlinkactive
链接1
链接2

为什么?

---

注：*ngIf中的条件仅为示例

您可以在li标记处直接使用*ngIf和routerLink

像

选项卡名称