Question

您好，我试图将我的出口路线嵌套在角度9中。每当我转到http://localhost:4200/app/(orders:orders)/(order-details:/order-details)时，我都会重定向到http://localhost:4200/app/(orders:orders)

我试图建立一个视图，使他们可以看到订单列表，然后在单击订单时显示另一个视图带有订单详细信息。感谢您的帮助

routes.ts

const routes: Routes = [
  { path: '', component: LoginComponent },
  {
    path: 'app',
    component: HomeComponent,
    runGuardsAndResolvers: 'always', canActivate: [AngularFireAuthGuard],
    children: [
      {
        path: 'orders', component: OrdersComponent, outlet: 'orders',
        children: [
          {
            path: 'order-details', component: OrderDetailsComponent, outlet: 'order-details',
          }
        ]
      }
    ]
  },
  { path: '**', redirectTo: '', pathMatch: 'full' }
];

home.component.html

<mat-drawer-container class="example-container">
    <mat-drawer mode="side" opened>
        Drawer content
        <button (click)="signOut()">signout</button>
    </mat-drawer>
    <mat-drawer-content>
        <p>hello</p>
        <router-outlet name="orders"></router-outlet>
        <router-outlet name="order-details"></router-outlet>
    </mat-drawer-content>
</mat-drawer-container>

orders.component.ts

<div>
    <ul>
        <li *ngFor="let order of orders | async">
            {{ order.id }} status is: {{order.status}}
            <button (click)="confirmOrder(order)">confirm order</button>
        </li>
    </ul>
    <router-outlet name="order-details"></router-outlet>
</div>

Answer 1

经过太多的努力，我得到了解决方案：-

解决方案网址：-/ app /（订单：订单/（订单明细：订单明细））

正在工作的Stackblitz：- https://stackblitz.com/edit/angular-oac197

路由配置：-

RouterModule.forRoot([
      { path: "", component: LoginComponent },
      {
        path: "app",
        outlet: "primary",
        component: HomeComponent,
        children: [
          {
            path: "orders",
            outlet: "orders",
            component: OrdersComponent,
            children: [
              {
                path: "order-details",
                component: OrderDetailsComponent,
                outlet: "order-details"
              }
            ]
          }
        ]
      },
      { path: "**", redirectTo: " ", pathMatch: "full" }
  ]
    )

app.component.html

<div class="example-container">
    <div mode="side" opened>
        Drawer content
        <button (click)="signOut()">signout</button>
    </div>
    <div>
        <p>hello</p>
    </div>
</div>
<router-outlet></router-outlet>
<button (click)="navigateToOrders()"> Go To Order </button>
<button (click)="navigateToOrderDetails()">Go To Order Details</button>

app.component.ts

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

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular";
  constructor(private router: Router) {}
  public navigateToOrders() {
    this.router.navigate(["app", { outlets: { orders: ["orders"] } }]);
  }

  public navigateToOrderDetails() {
    this.router.navigate(["app",{ outlets: {orders: ["orders", {outlets: {"order-details": ["order-details"] }}]}  }]);
  }
}

home.component.html

<router-outlet name="orders"></router-outlet>

orders.component.html

<p>
orders works!
</p>

<router-outlet name="order-details"></router-outlet>

order-details.component.html

<p>
order-details works!
</p>

角嵌套命名出口路线

1 个答案: