1

最初のページに注文のリストがあり、別のページに注文の詳細を表示して、それを更新し、ホームページに戻ったときに保存できるようにしたいと考えています。これが私のコードです：

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

1 に答える 1

1

別のページではなく、別のコンポーネントを意味していると思います。

1 つのコンポーネントが他の要素のビューの一部である場合、または両方に共通の親要素がある場合は、テンプレート バインディングを使用できます。

それ以外の場合はすべて、グローバル サービスを使用してデータを共有できます。

于 2016-01-20T17:24:57.143 に答える