Ссылка на свойство пользовательского объекта в одном файле машинописи в другом

Question

Я пытаюсь сослаться на свойство из массива пользовательских идентификаторов объектов 'id' в файле ts построения списка на другой файл ts (файл информации о зданиях).Моя цель состоит в том, чтобы использовать свойство «id» для изменения изображения в информационной странице здания на основе выбранного идентификатора.Однако у меня возникают некоторые проблемы со ссылкой на «id» из другого файла.

list-Building.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-Building.page.ts- создание массивапользовательских объектов Objects

    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

Зависит от вашей конфигурации, показывает ли вы отдельную страницу для деталей здания или вы просто показываете компонент деталей рядом с списком.

Предположим, вы показываете детали здания внутри компонента листинга

list-building.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" />

Подробнее о Взаимодействие компонентов

Answer 2

Для обмена данными между компонентами используйте сервис.Создайте службу 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

Затем можно передать выбранный идентификатор из одного компонента в другой в качестве параметра 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);
    }
  }
}

[ПРИМЕЧАНИЕ: ни один из этого кода не был проверен или проверен синтаксисом]