Angular: путь от карты до нового вида - PullRequest
Новая
       5

Angular: путь от карты до нового вида

0 голосов
/ 26 ноября 2018

Я работаю над проектом упражнений на Angular (последняя версия V).

Мое приложение создает экземпляры загрузочных карт динамически из массива Order и показывает их в моем "Order-Item-Component через мой шаблон".

Я добавил Routing, чтобы я мог обновить свой OrderId в Browser-Link после щелчка. Он работает.

Что я хочу: если пользователь нажимает на одну из моих карт - целоеНовое представление открывается с моим Order-Detail-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.htмл: 

<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>

Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 26 ноября 2018

Вы можете структурировать свое приложение следующим образом:

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"

0 голосов
/ 26 ноября 2018

Вы бы использовали <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> для навигации

...