Угловая 2 суб маршрутизация не работает - PullRequest
Новая
       6

Угловая 2 суб маршрутизация не работает

0 голосов
/ 25 июня 2018

Я пытаюсь внедрить дочерний маршрутизатор в моем приложении. то, что я сделал, щелкнув боковое меню, я перехожу к ребенку как 

this._router.navigate(['/parent/child']);

но дочерний компонент не выполняется, вместо этого родительский компонент выполняется снова.

роутер в app.module.ts 

const appRoutes: Routes = [
   { path: 'login', component: LoginComponent },
   {path:'parent',
       children:[
           {path: '', component: ParentComponent, pathMatch: 'full'}
          ,{path:"child",component:ChildComponent,
             outlet:'content'
           }]
   },
   {path:'**',component:LoginComponent}
 ];

ParentComponent 

 import { Component } from '@angular/core';
 import {Router} from '@angular/router';
 import {OnInit} from '@angular/core';

 @Component({
   selector: 'login',
   templateUrl: 'app/parent.template.html'
 })
 export class ParentComponent  implements OnInit{  
  constructor(private _router: Router){} 
   ngOnInit(){}
   menuClicked(event:any):void{             
        let elements = event.target.parentElement.children;
        for(let i=0;i<elements.length;i++){
            elements[i].classList.remove('active')
        }
        event.target.classList.add('active');
        this._router.navigate(['/parent/child']);
    }
 }

ChildCOmponent: 

 import { Component } from '@angular/core';
 import {Router} from '@angular/router';
 import {OnInit} from '@angular/core';

 @Component({
    templateUrl: 'app/child.template.html',
 })
 export class IncidentComponent  implements OnInit{  
    constructor(private _router: Router){} 
    ngOnInit(){}
}

Что случилось, так это то, что он перешел к родителю и работает нормально. Когда я щелкаю в левом меню, я вижу изменение URL-адреса в течение доли секунды, а затем перезагружает родительский элемент, удаляя дочернее имя из URL-адреса. Как я могу это исправить? Что я упустил в реализации?

Родительский шаблон 

<div class="home-container row">
   <div class="home-body col-12">
       <div class="home-header row">

       </div>
       <div class="home-contents row">
          <div class="left-menu col-2">
          </div>
       <div class="right-contents col-10">
          <router-outlet name="content"></router-outlet>
       </div>
   </div>
 </div>

Ответы [ 2 ]

0 голосов
/ 26 июня 2018

Попробуйте это 

this._router.navigate(['child'],{relativeTo: this.route});

Здесь this.route является экземпляром ActivatedRoute. 

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute)
0 голосов
/ 25 июня 2018

Это часто вызывается тем, где находится ваш <router-outlet>.Предполагается, что это единственная изменяющаяся часть вашего приложения. Проверьте, где находится, если оно не находится в основном компоненте

...