如何在angular2中单击按钮更改视图

1) 创建 STO 的对象 sto.model.ts

    export class Sto {
      id: number;
      trackingNumber: string;
      transferType: string; //or create an enum
    }

2) 创建一个 STO 的模拟来存储一些 Sto，稍后将由服务 sto.mock.ts 调用

    import { Sto} from "./sto.model.ts";
    export const STOS: Sto[] = {
    {id: 600071498}, trackingNumber: 'AB123', transferType: 'S2S'},
    {id: 600071577}, trackingNumber: 'CD123', transferType: 'S2S'}
    }

3）创建一个服务来调用组件获取所有产品，以及产品 Id ， Sto.service.ts

    import { Injectable } from "@angular/core";
    import { Sto } from "./sto.model.ts";
    import { STOS } from "./sto.mock.ts";

    @Injectable()
    export class StoService {
       getStos(): Product[] {
         return STOS;
       }

       getSto(stoId: number): Product {
        let result: Product;
        result = STOS.find(x => x.id === stoId);

        if (result) {
           return result;
        } else {
          return new Sto();
        }
      }
    }

4) 在你的 ItemComponent import 'Router' from @angular/router，import sto 模型和服务注入 sto 服务，创建一个 Sto 属性，在 ngOnInit 中填充数据，并在你的 html 中绑定它

    import { Router } from "@angular/router";
    import { Component, OnInit } from '@angular/core';
    import { StoService } from "./stoService.service.ts";
    import { Sto } from "./sto.model.ts";

    @Component({
    selector: 'app-item',
    templateUrl: './item.component.html'

    export class NavigationComponent implements OnInit {
      stos: Sto[];
      sto: Product;

   constructor(private stoService: StoService, private route: 
   Router) {
      this.stos= []; //initialize the stos collection

      this.sto= new Product(); //initialze the sto
   }

   ngOnInit() {
        this.stos = this.stoService.getStos();

   }

   navigateToItemDetails(stoId) {
    this.route.navigate(['item-details', stoId]);
  }

})

在您的 sto.component.html 中，您必须将 STO # 设置为带有可点击事件的链接，可能是这样的

    <a href="javascript:;" (click)="navigateToItemDetails(sto.id)"> {{sto.Id}}></a>

5）在您的 ItemDetailsComponent 中，导入以下所有依赖项

    import { Component, OnInit, OnDestroy, OnChanges} from '@angular/core';
    import { Product } from "../models/product.model";
    import { Subscription } from 'rxjs/Rx';
    import { ActivatedRoute, Router } from '@angular/router';
    import { ProductService } from "../services/product.service";

    @Component({
      selector: 'app-item-details',
       templateUrl: './item-details.component.html'})

   export class ItemDetailsComponent implements OnInit, OnDestroy, OnChanges 
   {
     sto: Sto;
     stoId: string;
     private subscription: Subscription;

     constructor(private activatedRoute: ActivatedRoute, private route: 
      Router, private stoService: StoService) { }

     ngOnInit() { //subscribe to read the params sent from ItemComponent
      this.subscription = this.activatedRoute.params.subscribe((params) => {
        this.productId = params['id'];
        this.sto = this.stoService.getSto(this.stoId);
    });

    ngOnDestroy() {
    this.subscription.unsubscribe();
}

6) 如您所见，从 id 中，您通过服务遍历 sto mock 中的数据，并获取 sto 对象，稍后您可以在您的 html 中进行相应操作

 <p> Tracking #: {{sto.trackingNumber}}</p>

7）不要忘记在 app.module.ts 中注册您的服务和组件

   //other imports
   import { StoService } from "./sto.service";
   import { ItemComponent } from './item.component';
   import { ItemDetailsComponent } from './item-details.component';
   import { RouterModule } from '@angular/router';


   @NgModule({
     imports: [//othhermoduleimports, RouterModule],
     declarations: [//othercomponent, ItemComponent, ItemDetailsComponent]
     providers: [ StoService],

记得为此添加路由，你可以谷歌那个。它很容易

8）并添加到您的路线

    { path: 'item-details/:id', component: ItemDetailsComponent}
    // the :id will be the parameter sent to the ItemDetailsComponent

快乐编码，欢迎使用 angular :)