Angular路由器不会重定向到使用该路径指定的组件

Question

我有一个包含2个组件Comp1和Comp2的小应用程序，其中Comp2有一个子组件Comp2Child。

我正在尝试通过单击component2中的按钮重定向到并加载component1。即使url更改为/ comp1，仍然会在视图中呈现component2 HTML。

这是代码 -

路由 -

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中的按钮时，网址会更改为/ comp1，但视图仍显示 comp2正常工作。

Answer 1

要查看comp2的视图，您必须拥有路由器插座，该插座可以保存当前活动路线的视图。

在您的comp2.html中，将<router-outlet></router-outlet>放在某处，并看到它也应显示其他组件的视图。

但是，那会给你带来另一个麻烦，comp2仍然存在！你现在必须知道如何摆脱它。