Angular：从卡片路由到新视图

Question

我正在 Angular（最新 V）中进行锻炼项目。

我的应用程序从订单数组中动态实例化 bootstrap 卡片，并通过我的模板将它们显示在我的“Order-Item-Component”上。

我添加了路由以便我可以在浏览器上更新我的 OrderId - Link 点击后。正在运行。

我想要的是：如果用户单击我的一张卡片 - 将打开一个全新的视图，其中包含该特定 ID 的订单详细信息组件。我的卡片在该视图中应该是不可见的。随后，用户可以使用 'back' Link.

返回卡片视图

我不知道如何路由，以便我的卡片将被详细视图取代。

我必须在哪里放置我的 'router-outlet' 用于细节补偿？我知道，我不能将它与我的订单组件放在同一个视图中 - 因为在这种情况下两者都是可见的。

这是我的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

您可以在应用组件中使用 <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>

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

Answer 2

您可以这样构建您的应用程序：

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>，如果您需要已完成订单的行为方式相同，请让它们 link 以与其他订单相同的方式来订购详细信息。

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

Angular：从卡片路由到新视图

Angular: Route from Card to a new View

html

typescript

angular2-routing

bootstrap-4

angular