Question

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

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

Answer 1

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

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

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

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

1 个答案: