Angular：从卡片路由到新视图

Posted 2023-03-13

【中文标题】Angular：从卡片路由到新视图

【英文标题】：Angular: Route from Card to a new View

【发布时间】：2019-04-28 08:32:56

【问题描述】：

我正在使用 Angular（最新 V）进行一个练习项目。

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

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

我想要的是：如果用户点击我的一张卡片 - 一个全新的视图将打开，其中包含该特定 ID 的 Order-Detail-Component。我的卡片在那个视图中应该是不可见的。随后，用户可以使用“返回”链接返回卡片视图。

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

我必须将我的“路由器插座”放置在哪里？我知道，我不能将它放在与我的 Order-Component 相同的视图中 - 因为在这种情况下两者都是可见的。

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

提前致谢。

【问题讨论】：

导航到 order-details 组件的路由器链接在哪里？

我现在用我的 id 编辑了它

【参考方案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"

【讨论】：

但我必须在我的链接上显示“Id”？如何添加？

添加到订单详情路径

链接工作知道 :) thx - 但知道我没有 ID？我怎么能通过它...我把它写到我的卡上：[routerLink]="['/order-details/:id']"

更新了答案，参考你如何传递 id [routerLink]="['/order-details', id]

【参考方案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>

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