Angular2：如何在另一个页面上显示元素的详细信息？答案

【问题标题】：Angular2: How to display details of an element on another page?Angular2：如何在另一个页面上显示元素的详细信息？
【发布时间】：2016-04-26 15:47:51
【问题描述】：

我在第一页上有一个订单列表，我想在另一个页面上显示一个订单的详细信息，以便能够更新它，并在返回主页时保存它.这是我的代码：

app.component.ts：

import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';

import {HomeComponent} from './home/home.component';
import {OrderDetailsComponent} from './order-details/order-details.component';
import {MockComponent} from './mock/mock.component';
import {NavbarComponent} from "./navbar/navbar.component";

@Component({
    selector: 'main',
    template:`
        <navbar>Loading navbar...</navbar>
        <div class="container">
            <router-outlet>Loading body...</router-outlet>
        </div>
    `,
    directives: [HomeComponent, OrderDetailsComponent, MockComponent, NavbarComponent, ROUTER_DIRECTIVES]
})

@RouteConfig([
    {path:'/',             name: 'Home',          component: HomeComponent,        useAsDefault: true},
    {path:'/order/:id',    name: 'OrderDetails',  component: OrderDetailsComponent},
    {path:'/mock',         name: 'Mock',          component: MockComponent}
])

export class AppComponent {
    constructor() {}
}

home.component.ts：

import {Component, OnInit} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES, Router, RouteParams} from 'angular2/router';

import {AppServices} from '../services/app.services';
import {Order} from '../objects/order';
import {OrderDetailsComponent} from "../order-details/order-details.component";

@Component({
  selector: 'home',
  templateUrl: './app/home/home.html',
  providers: [AppServices],
  directives: [ROUTER_DIRECTIVES],
})

export class HomeComponent implements OnInit {
  public orders: Order[];

  onSelect(order: Order) {
    this._router.navigate( ['OrderDetails', { id: order.id }] );
  }

  constructor( private _appServices: AppServices, private _router: Router, routeParams: RouteParams) {
  }

  ngOnInit() {
    this.getOrders();
  }

  getOrders() {
    this._appServices.getOrders()
        .subscribe(res => this.orders = res);
  };
}

order-details.component.ts:

import {Component} from 'angular2/core';
import {Order} from '../objects/order';
import {AppServices} from '../services/app.services';

@Component({
    selector: 'order-details',
    templateUrl: './app/order-details/order-details.html',
    inputs: ['order'],
    providers: [AppServices]
})

export class OrderDetailsComponent {

    public order: Order;

    constructor(private _appServices: AppServices) {
    }
    updateOrder(order: Order) {
        this._appServices.updateOrder(order);
    }
    onSubmit() {
        this.updateOrder(this.order);
    };

}

order-details.html：

<form (ngSubmit)="onSubmit()" #orderForm="ngForm">

    <div class="form-group col-md-6">
        <label for="type">Type :</label>
        <select class="form-control" [(ngModel)]="order.type">
            <option *ngFor="#type of types" [value]="type.typeEnum">{{type.text}}</option>
        </select>
    </div>

    <div class="form-group col-md-6">
        <label for="wishProducts">Wish products :</label>
        <input type="text" class="form-control" [(ngModel)]="order.wishProducts">
    </div>

    <div class="form-group col-md-6">
        <label for="budget">Budget : </label>
        <input type="number" class="form-control" [(ngModel)]="order.budget">
    </div>

    <div class="form-group col-md-6">
        <label for="dateDelivery">Delivery date: </label>
        <input type="date" class="form-control" [(ngModel)]="order.dateDelivery">
    </div>
...

【问题讨论】：

您可以通过 RouteParams 发送值对象并将这些值返回到您想要的另一个页面，或者您也可以通过单击没有的地方发送值。可用的方法或可以使用某种全局服务类型的文件在组件之间交换数据。
我看到您尝试通过使用路由器的主-详细视图导航来做到这一点，其中一个视图显示摘要，然后另一个视图显示详细信息。这似乎是正确的方法，所以问题不清楚。是不是出了什么问题，什么不起作用？您是否收到任何错误消息，遇到困难？
感谢您的回答，我尝试使用全局服务来共享我的订单对象，但出现“异常：TypeError: l_order0 is undefined in [order.id in OrderDetailsComponent@1 :36]”。你知道它可能来自哪里吗？当我在订单详情页面时，我刚刚得到了表单，其中没有所选订单的信息。
OK 我找到了错误的来源：我在 home.component 和 order-details.component 而不是 app.component 中导入了全局服务。再次感谢你们！

标签： angular master-detail angular2-routing angular2-forms

【解决方案1】：

我猜你的意思是另一个组件而不是另一个页面。

当一个组件是另一个元素的视图的一部分时，或者当两者都有一个共同的父元素时，您可以使用模板绑定。

在所有其他情况下，您可以使用全球服务来共享数据。

【讨论】：