Question

我刚开始学习角度2.我想要实现的是当我点击项目视图时会改变并显示项目细节。

当我点击60074190时，视图应该得到更改并显示项目详细信息

我不知道如何实现这一点我有两个组件1.item和2.项目详细信息都在传输文件夹中。我使用传输路由来路由到项目页面，但现在点击项目名称我想更改我的视图并显示项目详细信息。请指导我如何做到这一点

Answer 1

1）创建一个STO对象sto.model.ts

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

2）创建一个模拟STO以存储少量Stos，稍后将由服务调用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导入＆＃39;路由器＆＃39;来自@ angular / router，导入sto模型和服务注入sto service，创建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],

并且记得为此添加路由，你可以google that.its非常容易

8）并添加到您的路线

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

快乐的编码和欢迎角度：）

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

1 个答案: