Question

我正在Angular（最新V）的一个锻炼项目中。

我的应用从实例数组中动态实例化引导卡，并通过模板将其显示在“订单项组件”上。

我添加了路由，以便单击后可以更新浏览器链接上的OrderId。它正在工作。

我想要的是：如果用户单击我的一张卡片，则会打开一个新视图，其中包含该特定ID的“订单详细信息”组件。我的卡片在该视图中应该是不可见的。随后，用户可以使用“后退”链接返回卡片视图。

我不知道该如何路由，以便将我的卡替换为“详细视图”。

对于细节组件，我必须在哪里放置“路由器出口”？我知道，我无法将其与订单组件放置在同一视图中-因为在这种情况下两者都可见。

这是我的app.routing.ts ：（第一条订单路线运行正常）

import {RouterModule, Routes} from '@angular/router';
import {OrderComponent} from './order/order.component';
import {ORDER_ROUTES} from './order/order.routes';
import {OrderDetailComponent} from './order/order-detail/order-detail.component';


const APP_ROUTES: Routes = [


  { path: '', redirectTo: '/orders', pathMatch: 'full'},
  { path: 'orders', component: OrderComponent},
  { path: 'orders/:id', component: OrderDetailComponent

];


export const routing = RouterModule.forRoot(APP_ROUTES);

这是我的Order.Component.html：

<div class="container-fluid"><br>
  <h2 id="heading-order"><i class="fa fa-shopping-cart f-left "></i>Open Orders</h2>
  <p id="heading-items"> {{ orders.length }} Items </p>
</div>


<app-order-list></app-order-list>



<app-order-completed></app-order-completed>

谢谢。

Answer 1

您也许可以通过以下方式构建应用程序：

app.component.html：

<router-outlet></router-outlet>

路由模块：

const APP_ROUTES: Routes = [

  { path: '', redirectTo: '/orders', pathMatch: 'full'},
  { path: 'orders', component: OrderComponent},
  { path: 'order-details/:id' component: OrderDetailsComponent}

];

order.component.html：

在卡上提供[routerLink]="['/order-details', id]，并传递参数以识别卡

订单组件还可以在视图中包含<order-completed>，如果您需要完成的订单以相同的方式运行，请以与其他订单相同的方式将它们链接到订单详细信息。

要导航回到订单列表，请在您的order-details.component.html中提供一个路由器链接，例如routerLink="/orders"

Answer 2

您应在应用程序组件中使用<router-outlet>而不是自定义标签<app-order-list></app-order-list>, <app-order-completed></app-order-completed>。

通过这种方式可以创建子视图：

const APP_ROUTES: Routes = [
  { path: '', 
    pathMatch: 'full', 
    component: OrderComponent,
    children: [
     { path: 'order-list', component: OrderListComponent},
     { path: 'orders-completed', component: OrderCompletedComponent},
  ]},
];

这就是OrderComponent的样子：

<div class="container-fluid"><br>
  <h2 id="heading-order"><i class="fa fa-shopping-cart f-left "></i>Open Orders</h2>
  <p id="heading-items"> {{ orders.length }} Items </p>
</div>


<router-outlet></router-outlet>

然后在routerLink="/orders-completed"或<button>标签上使用<a>进行导航

角度：从Card转到新视图

2 个答案: