Question

我正在尝试将列表建筑ts文件中的自定义建筑对象“ id”的数组中的属性引用到另一个ts文件（建筑信息ts文件）。我的目标是使用“ id”属性根据所选的ID来更改建筑物信息页面中的图片。但是，我遇到了从另一个文件引用“ id”的一些问题。

list-buildings.page.html

<ion-item *ngFor="let building of buildingList">
    <img [src]="building.image" (click)="goToFunBuildings(building.id)">
    <ion-label>{{ building.label }}</ion-label>
</ion-item>

list-buildings.page.ts-创建自定义建筑对象数组

    public buildingList: any[] = [
        {
            id: 1,
            label: 'Campus Gym!',
            image: '/assets/img/gym.png',
        }
        ..... //rest of buildings
    ];

buildingInfo-page.page.ts-这是我尝试引用ID的地方，如果单击相应的标签，它将显示正确的图片

goToBuilding(){
    if(building.id == 1){
      this.angularLogo= "/assets/img/library.jpg";
    }

    if(building.id == 2){
      this.angularLogo= "/assets/img/gym.jpg";
    }


    return this.angularLogo;
  }

Answer 1

要在组件之间共享数据，请使用服务。创建包含以下代码的Angular服务：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class BuildingService {

    public buildingList: any[] = [
        {
            id: 1,
            label: 'Campus Gym!',
            image: '/assets/img/gym.png',
        }
        ..... //rest of buildings
    ];
}

将服务注入需要此信息的两个组件中，然后通过服务访问此数据。

export class BuildingListComponent {
  get buildingList(): string {
    return this.dataService.buildingList;
  }

  constructor(private buildingService: BuildingService ) {

  }
}

我在这里有个例子：

https://stackblitz.com/edit/angular-simpleservice-deborahk

然后，您可以将所选ID从一个组件传递到下一个组件，作为URL上的参数。其他组件也可以注入服务并从列表中访问适当的建筑物。

export class BuildingInfoComponent implements OnInit {
  currentBuilding;

  constructor(private buildingService: BuildingService ) {

  }

  ngOnInit() {
    const param = this.route.snapshot.paramMap.get('id');
    if (param) {
      const id = +param;
      this.currentBuilding = this.buildingService.buildingList.find(item => item.id === id);
    }
  }
}

[注意：此代码均未经过测试或语法检查]

Answer 2

这取决于您的配置，是显示单独的页面以获取建筑详细信息，还是仅显示清单附近的详细信息组件。

假设您在清单组件中显示建筑物详细信息

list-buildings.page.html

<!-- listing -->
<building-details [url]="angularLogo"></building-details>

您已经在angularLogo内更改了goToBuilding()。

这是一个简单的BuildingDetailsComponent

building-details.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'bs-building-details',
  templateUrl: './building-details.component.html',
  styles: []
})
export class BuildingDetailsComponent implements OnInit {

  @Input url: string;

  constructor() { }

  ngOnInit() {
  }

}

building-details.component.html

<img [src]="url" />

详细了解Component Interaction

将一个打字稿文件中的自定义对象的属性引用到另一个

2 个答案: