javascript - Angular routing isn't showing content - Stack Overflow

admin管理员组

文章数量:1350365

I wanted to implement routing in such a way that if you click on the dropdown it goes to that particular page. But i want the header to remain while routing to other ponents.It is going to the particular url but it isn't showing the content.I have tried child routing but it doesn't seem to work.

The above picuture is how the dropdown looks like. It has the following url

localhost:4200/body

when i click on the user management I want it to go to

localhost:4200/body/user

Though it goes to the particular url it doesn't show any content below as in the picture.

These are my codes (app.routing.ts and .html)

I wanted to implement routing in such a way that if you click on the dropdown it goes to that particular page. But i want the header to remain while routing to other ponents.It is going to the particular url but it isn't showing the content.I have tried child routing but it doesn't seem to work.

The above picuture is how the dropdown looks like. It has the following url

localhost:4200/body

when i click on the user management I want it to go to

localhost:4200/body/user

Though it goes to the particular url it doesn't show any content below as in the picture.

These are my codes (app.routing.ts and .html)

• javascript
• angular
• angular6
• angular-routing

Share Improve this question Follow edited Sep 27, 2018 at 13:14 Zheyuan Li 73.5k1818 gold badges191191 silver badges262262 bronze badges asked Sep 27, 2018 at 12:25 Jijo RobinJijo Robin 38511 gold badge1010 silver badges2727 bronze badges 2

• 4 Please post your code and not image. Please take a look stackoverflow./help/how-to-ask – Pratap A.K Commented Sep 27, 2018 at 12:26
• Please create a stackblitz code. – Suresh Kumar Ariya Commented Sep 27, 2018 at 12:33

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 6

I think you forgot to add <router-outlet></router-outlet> in your BodyComponent html. add it's all of your code seems fine

This is what happened to me: Since it wasn't working, I tried to see if it gives an error if I remove

<router-outlet></router-outlet>

It didn't. But then I pasted back, and it worked!!! Could have been a caching problem?!?

For me, I added a route like:

{ path: '/', ponent: HomeComponent }

and the browser console threw error

Invalid configuration of route '/': path cannot start with a slash

So I replaced that with:

{ path: 'home', ponent: HomeComponent },
{ path: '', redirectTo: 'home', pathMatch: 'full' }

Lesson learnt: Keep an eye on the Browser console

Accordinh tonthe doc

const crisisCenterRoutes: Routes = [   {
    path: 'crisis-center',
    ponent: CrisisCenterComponent,
    children: [
      {
        path: '',
        ponent: CrisisListComponent,
        children: [
          {
            path: ':id',
            ponent: CrisisDetailComponent
          },
          {
            path: '',
            ponent: CrisisCenterHomeComponent
          }
        ]
      }
    ]   } ];

So for your case you will have :

{ path: 'body', ponent:      BodyComponent, children: [ { path: '', redirectTo: 'user', pathMatch: 'full' }, { path: 'user', ponent: UserComponent } ] }

If you have nested routes you have to have nested router outlet:

{ path: 'user', ponent: LoginViewComponent,
    children: [
      { path: 'catalog', ponent: CatalogViewComponent },
      {
        path: 'home',  ponent: HomeViewComponent,
      }
    ]
},      
{ path: '**', redirectTo: 'user' }

Then:

<div class="container">
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
      <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a routerLinkActive="active" 
          routerLink="/user">Login</a></li>
        <li> <a routerLinkActive="active" 
          routerLink="/user/home">Home</a></li>
        <li> <a routerLinkActive="active" 
          routerLink="/user/catalog">Catalog</a></li>
      </ul>
    </div>
    <router-outlet></router-outlet>
  </div>

And in your child ponent:

<h1>Login</h1>
<router-outlet></router-outlet>

I created a working example here.

本文标签： javascriptAngular routing isn39t showing contentStack Overflow