简体   繁体   中英

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

I try to create an app with two differents module, where one for my front-office and one for my back-office. Route work perfectly with the front-office, I made it for my main module.

When I navigated with the second module, when I tip the link in the browser navigation bar, It redirect me to the perfect component. But when I use routeLink inside my template to navigate inside my back-office, it doesn't work.

Here's my configuration of second module (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 { }

This is my template inside 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>

In my back-office module I use angular material and I don't know if it have conflict with something

In Angular you only can to have one RouterModule.forRoot([]) usually it calls app.module and the others modules use RouterModule.forChild().

I use the signature for link

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

and

<router-outlet></router-outlet>

for insert the template of component.

I hope that it helps you

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM