CODEWITHSUNDEEP
angularroutesnavigation
user1938143
user1938143

Reputation: 1184

Angular can not navigate to child component

I have a problem by implementing routing with angular 7. the code is easy, but I can not find, what the problem is. maybe you can help me.

the codes as follows: 

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <div class="container">
    <a routerLinkActive="active" 
       routerLink="/login">Login</a> |

    <a routerLinkActive="active" 
       routerLink="/home/catalog">Homasdfasdfe</a> | 
      
    <a routerLinkActive="active" 
       routerLink="/home/">Home</a> | 

    <a routerLinkActive="active" 
      routerLink="/catalog">Catalog</a> 
      
    <router-outlet></router-outlet>
  </div>
  `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

}

app-routing.module.ts: 

import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { LoginViewComponent } from './views/login/login.component';
import { HomeViewComponent } from './views/home/home.component';
import { CatalogViewComponent } from './views/catalog/catalog.component';

@NgModule({
  declarations: [ 
    LoginViewComponent, HomeViewComponent, CatalogViewComponent
  ],
  imports: [
    RouterModule.forRoot([
      { path: 'login', component: LoginViewComponent },
      { path: 'home', component: HomeViewComponent, children: [
         { path: 'catalog', component: CatalogViewComponent }
      ] },
      { path: 'catalog', component: CatalogViewComponent },
      { path: '**', redirectTo: 'login' }
    ])
  ],
  exports: [
    RouterModule,
  ],
  providers: [],

})
export class AppRoutingModule {}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app.routing.module';

@NgModule({
  declarations: [ AppComponent],
  imports: [ 
    AppRoutingModule, 
    BrowserModule, FormsModule, HttpModule 
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

the problem is, if I click Homasdfasdfe, it will show the content of home, not catalog.

any solutions?

Best regards,

Leo

Upvotes: 0

Views: 118

Answers (2)

Eeshwar Ankathi
Eeshwar Ankathi

Reputation: 266

Try changing the route for home as below.

RouterModule.forRoot([
   { path: 'login', component: LoginViewComponent },
   { path: 'home', children: [
      { path:'', component: HomeViewComponent },
      { path: 'catalog', component: CatalogViewComponent }
   ]},
   { path: 'catalog', component: CatalogViewComponent },
   { path: '**', redirectTo: 'login' }
])

Upvotes: 1

Christopher Sabin
Christopher Sabin

Reputation: 74

I think your problem is that you use the "CatalogViewComponent" component in a child route and then in a primary road just below it. Try to delete the primary "catalog" route, maybe this will solve your problem.

Upvotes: 0

Related Questions