路由到另一个组件的问题

3 回答

• 1

  如果您希望默认显示 Demo 组件，但在路线更改时将其删除，则更新您的路线配置，如：

  const routes: Routes = [
      { path: '', component: DemoComponent },   // this will route to demo component by default;
      { path: 'home', component: HomeComponent },
  ];
  

  你的 app.component.html 中只有 <router-outlet></router-outlet> .

  在您的示例中，您将 demo component 静态添加到 app component ，因此这意味着它将始终存在（除非您添加一些if条件）

  https://stackblitz.com/edit/angular-material2-issue-fkwdrm?file=app%2Fapp-routing.module.ts

  回复于 2024-04-26T16:41:53+08:00
• 3

  app.component.html（删除演示组件）

  <router-outlet></router-outlet>
  

  更新路由器以添加演示路径：

  import { NgModule } from '@angular/core';
  import { RouterModule, Routes } from '@angular/router'; 
  import { HomeComponent } from './home/home.component';
  import { DemoComponent } from './demo/demo.component';
  
  const routes: Routes = [
  { path: 'demo', component: DemoComponent },
  { path: 'home', component: HomeComponent },
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
  })
  export class AppRoutingModule { }
  

  问题是您是在路由器插座之外渲染您的演示组件 .

  回复于 2024-04-26T16:41:53+08:00
• 2

  查看StackBlitz中的app.component.html文件：

  <app-demo></app-demo>
  <router-outlet></router-outlet>
  

  这告诉Angular路由器显示app-demo组件以及路由器应该显示的任何组件 . 只需从主应用程序组件中删除app-demo就可以了 .

  回复于 2024-04-26T16:41:53+08:00