angular child 路由问题

Question

我在使用 child 组件正确编写 parent 组件时遇到问题。当我路由到 children 时，它似乎也是 re-creating parent，这导致 html 被加倍。

您可以在我创建的 stackblitz 示例中看到这一点 here。

在我的应用程序的根目录中，我有一个配置组件：

@Component({
  selector: 'app-configuration',
  template: ` <app-sidebar></app-sidebar>
             <router-outlet></router-outlet>`
   })

然后它包含一个侧边栏组件，其中包含我希望用来导航的链接列表。

@Component({
  selector: 'app-sidebar',
  template: `<div id="menu">
            <ul *ngFor="let gateway of gateways$ | async">
                <li><a routerLink="configure/{{gateway.toLowerCase()}}"> 
 {{gateway}}</a></li>
            </ul>
          </div>`
   })

export class SidebarComponent implements OnInit {

  gateways$:Observable<string[]>;
  constructor() { }
   ngOnInit() {
    this.gateways$ = this.getGateways()
   }
   getGateways():Observable<string[]>{
    let gateways=["CDS","MCP","CNS"]
    return of(gateways);       
}

问题的原因似乎是我定义路由的方式：

const routes: Routes = [
  {
    path:'configure',component: ConfigurationComponent, 
    children:[
        {path:'cds', component: CdsComponent},
        {path:'mcp', component:McpComponent},
        {path:'cns', component:CnsComponent},
    ]
  }

有人能告诉我是否可以按照我的方式做我想做的事吗？我希望将 child 组件包含在配置组件中，这样我就可以将同级组件添加到配置中，以允许我做其他事情。

Answer 1

尝试将重定向默认路由添加到您的子路由中。

const routes: Routes = [
  {
    path:'configure',component: ConfigurationComponent, 
    children:[
        {path: '', redirectTo: 'cds', pathMatch: 'full'},
        {path:'cds', component: CdsComponent},
        {path:'mcp', component:McpComponent},
        {path:'cns', component:CnsComponent},
    ]
  }

在这些情况下有默认路径很好

如果这不起作用，请提供完整的代码示例（包含整个路由模块，而不仅仅是路由）

Answer 2

三期：

在 app.component.ts 模板中应该是 <router-outlet></router-outlet> 而不是 <app-configuration></app-configuration>
在 sidebar.component.ts 模板中应该有 <li><a routerLink="/configure/{{gateway.toLowerCase()}}">{{gateway}}</a></li> 而不是 <li><a routerLink="configure/{{gateway.toLowerCase()}}">{{gateway}}</a></li>

/ 从 routerLink

中丢失

将您的路由配置更改为：

  const routes: Routes = [
  {
    path: 'configure', component: ConfigurationComponent,
    children: [
      { path: 'cds', component: CdsComponent },
      { path: 'mcp', component: McpComponent },
      { path: 'cns', component: CnsComponent },
    ]
  },
  {
    path: '**', redirectTo: '/configure', pathMatch: 'full'
  }
];

Here's a Working Sample StackBlitz for your ref.

Answer 3

您正在混合组件和路由。

在app.component.ts中，你总是显示ConfigurationComponent，所以只显示一次。

然后你继续路由它，所以你第二次显示它。

相反，在 app.component.ts 中，模板应该只是 <router-outlet></router-outlet>，以便您触发您设置的路由器。

然后，在您的 configuration.component.ts 中，您可以使用 template:`。

对了，你的ngFor*位置不对，应该是：

<ul>
  <li *ngFor="let gateway of gateways$ | async"><a [routerLink]="['configure', gateway.toLowerCase()]">{{gateway}}</a></li>
</ul>

angular child 路由问题

angular routing issues with child routes

angular

angular2-routing