Angular2 RouteLink 在 "a" 标签中不起作用，但是当我在浏览器的导航栏中提示它时它起作用了

Question

我尝试创建一个具有两个不同模块的应用程序，一个用于我的前台，一个用于我的后台。路由与前台完美配合，我为我的主要模块做了它。

当我使用第二个模块导航时，当我在浏览器导航栏中提示 link 时，它会将我重定向到完美组件。但是当我在我的模板中使用 routeLink 在我的后台导航时，它不起作用。

这是我对第二个模块 (back.module.ts) 的配置：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { BackComponent } from './back.component';
import { Page1Component } from '../page1.component';
import { Page2Component } from '../page2.component';

@NgModule({
  declarations: [
    BackComponent,
    Page1Component,
    Page2Component
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      {
        path: 'back',
        component: MainAdministrationComponent,
        children: [
          {
            path: 'page1',
            component: Page1Component
          },
          {
            path: 'page2',
            component: Page2Component
          },
          {
            path:'',
            redirectTo: '/back/page1',
            pathMatch: 'full'
          }
        ]
      }
    ])
  ],
  providers: [],
  bootstrap: [BackComponent]
})
export class BackModule { }

这是我里面的模板back.component.hmtl

<ul class="nav navbar-nav">
    <li>
        <a route-link="/back/page1" routeLinkActive="active"><i class="material-icons">home</i> Page 1</a>
    </li>
    <li>
        <a route-link="/back/page2" routeLinkActive="active"><i class="material-icons">event</i> Page 2</a>
    </li>
</ul>

后台模块我用的是angular material不知道有没有冲突

Answer 1

在Angular中你只能有一个RouterModule.forRoot([])通常它调用app.module而其他模块使用RouterModule.forChild()。

我使用link

的签名

 <a [routerLink]="['/examplePath']" routerLinkActive="active">

和

<router-outlet></router-outlet>

用于插入组件模板。

希望对你有所帮助

Angular2 RouteLink 在 "a" 标签中不起作用，但是当我在浏览器的导航栏中提示它时它起作用了

Angular2 RouteLink doesn't work in "a" tag but it's work when I tip it in navigation bar of browser

angular

routelink