Угловой маршрутизатор не перенаправляет на компонент, указанный в пути - PullRequest
Новая
       7

Угловой маршрутизатор не перенаправляет на компонент, указанный в пути

0 голосов
/ 30 апреля 2018

У меня есть небольшое приложение с 2 компонентами, Comp1 и Comp2, где у Comp2 есть дочерний компонент Comp2Child.

Я пытаюсь перенаправить и загрузить component1 по нажатию кнопки в component2. Даже если URL-адрес изменится на / comp1, HTML-код компонента2 будет отображаться в представлении.

Вот код-

Маршрутизация 

const appRoutes: Routes = [
  { path: 'comp1', component: Comp1Component },
  { path: '', component: Comp2Component, children: [
      { path: 'child', component: Comp2ChildComponent }
    ]
  }
];

app.module.ts 

@NgModule({
  imports: [
    BrowserModule,
    CommonModule,
    FormsModule,
    HttpClientModule,
    RouterModule.forRoot(appRoutes)
  ],
  declarations: [
    Comp1Component,
    Comp2Component,
    Comp2ChildComponent
  ],
  bootstrap: [
    Comp2Component
  ],
  providers: [
    NewService
  ]
})

comp2.html 

<p>
  comp2 works!
</p>
<button (click)="m1()">Emit</button>

comp2.ts 

export class Comp2Component implements OnInit {

   constructor(private newService: NewService,
    private router: Router) { }

  ngOnInit() {
    console.log('comp2 init');
  }

  m1() {
    // this.newService.e1.emit('e1');
    // this.newService.s1.next('s1');
    this.router.navigate(['comp1']);
  }
}

comp1.ts 

export class Comp1Component implements OnInit {

  constructor(private newService: NewService,
    private router: Router) { }

  ngOnInit() {
    console.log('comp1 init');
    this.newService.e1.subscribe((res1) => {
      console.log('e1 res in comp1 emitted from comp2: ', res1);
    });
    this.newService.s1.subscribe((res2) => {
      console.log('s1 res in comp1 emitted from comp2: ', res2);
    });
  }

}

Когда приложение загружается, Component2 загружается как часть начальной загрузки. Когда я нажимаю на кнопку в comp2.html, URL-адрес меняется на / comp1, но в представлении по-прежнему говорится, что comp2 работает .

Check this image

1 Ответ

0 голосов
/ 30 апреля 2018

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

В вашем comp2.html положите куда-нибудь <router-outlet></router-outlet>, и вы увидите, что он должен отображать вид и других компонентов.

Но это доставит вам еще одну неприятность: comp2 все еще будет присутствовать там !! И теперь вы должны знать, как от этого избавиться.

...