У меня есть модуль, который отображает карту с некоторыми иконками.Если я щелкну значок на карте, я хочу обновить другой вид с данными о ресторане, которые я нахожу в списке ресторанов, с идентификатором нажатой иконки.У меня есть функция обновления для этой цели, но я не знаю, как получить доступ к этой функции.Я отображаю оба компонента в app.component.html.
Я попытался найти проблему в Google, но не знаю, что мне искать, потому что я впервые работаю с angular.(делаю это в целях обучения)
У меня есть основной компонент:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.sass']
})
export class AppComponent {
title = 'PandasRestaurantApp';
}
, где я рендеринг моих двух других представлений:
<vo-ui-osm-view
[showDebugInfo]="false"
[showControlsZoom]="false"
[showControlsCurrentLocation]="true"
(addressChanged)="onAddressChange($event)"
>
</vo-ui-osm-view>
<app-company-details></app-company-details>
<router-outlet></router-outlet>
представление OSM рендерингакарта с иконами ресторанов.Если щелкнуть значок ресторана:
mapOnClick(evt) {
const map = evt.map;
var restaurants = this.restaurants;
//this bit checks if user clicked on a feature
const iconDetails = map.forEachFeatureAtPixel(evt.pixel,
function(feature) {
console.log(feature.c);
var id = feature.c.split("_")[0];
console.log(id);
var restaurant = restaurants.find((restaurant) =>{
return restaurant.id == id;
});
return restaurant;
})
// here I want to call the set function of the other component
}
Я хочу обновить модель другого компонента найденным рестораном.
В другом представлении есть функция (setRestaurant), позволяющая сделать это.:
@Component({
selector: 'app-company-details',
templateUrl: './company-details.module.component.html',
styleUrls: ['./company-details.module.component.sass']
})
export class CompanyDetails {
@Output()
restaurants : Array<Restaurant>;
setRestaurant(restaurant){
this.restaurants = new Array<Restaurant>();
this.restaurants.push(restaurant);
}
constructor() {
var restaurants = new restaurantDetailsService();
this.restaurants = restaurants.get();
}
}
Представление представляет собой простой цикл для всех ресторанов в массиве ресторанов:
<li *ngFor="let r of restaurants; let i = index">
<b>id: {{r.id}}</b> <br>
<b>Name: {{r.name}}</b><br>
<b>Strasse: {{r.street}}</b><br>
<b>Hausnummer: {{r.streetNumber}}</b><br>
<b>Zusatz: {{r.streetExtra}}</b><br>
<b>Postleitzahl: {{r.postalcode}}</b><br>
<b> longitude: {{r.longitude}}</b><br>
<b> latitude: {{r.latitude}}</b><br>
<b> Tagesangebot:
<li *ngFor = "let m of r.mealPlan">
<b>Mahlzeit: {{m.mealName}}</b><br>
<b>Preis: {{r.price}}</b><br>
</li></b>
</li>
Я ожидаю обновить представление с найденным рестораном, но я нене знаю, как архивировать это.
Редактировать:
@ Sajeetharan Я создал эту услугу:
import { Injectable, Output, OnInit } from '@angular/core';
import { Restaurant } from '../../Model/restaurant.model';
import { Meal } from '../../Model/meal.model';
@Injectable ({
providedIn: 'root'
})
export class RestaurantDetailsService implements OnInit {
@Output()
restaurants: Array<Restaurant>;
@Output()
restaurant: Restaurant;
constructor(){
this.restaurants = [
{
id: 'r1',
name: 'Restaurant1',
street: "Händelstrasse",
streetExtra: "b",
streetNumber: "7",
postalcode: "18069",
latitude: 54.22046600000008,
longitude: 9.706516000000008,
daylieSpecial: [new Meal("TagesMal",["Zutat1", "Zutat2"], 12)],
mealPlan: [ new Meal("IrgendEinMal",["Zutat4", "Kaese"], 10),
new Meal("HackZwiebel",["Hack", "Zwiebel"], 3) ]
},
{
id: 'r2',
name: 'Restaurant2',
street: "Strasse",
streetExtra: "b",
streetNumber: "10",
postalcode: "18069",
latitude: 54.22006740000008,
longitude: 9.706316300000008,
daylieSpecial: [new Meal("TagesMal",["Zutat1", "Zutat2"], 12)],
mealPlan: [ new Meal("IrgendEinMal",["Zutat4", "Kaese"], 10),
new Meal("HackZwiebel",["Hack", "Zwiebel"], 3) ]
}
];
}
ngOnInit(){
}
getRestaurant(): Observable<Restaurant>{
return of(this.restaurant);
}
setRestaurant(restaurant){
this.restaurant = restaurant;
}
getRestaurantList(): Restaurant [] {
return this.restaurants;
}
}
Мой компонент компанииблокируется вот так:
import { Component, OnInit, OnDestroy, Input, Output, EventEmitter , ChangeDetectorRef} from '@angular/core';
import { Restaurant } from '../../../Model/restaurant.model'
import { RestaurantDetailsService } from '../../Services/restaurantDetails.service'
@Component({
selector: 'app-company-details',
templateUrl: './company-details.module.component.html',
styleUrls: ['./company-details.module.component.sass']
})
export class CompanyDetails {
restaurant: Restaurant;
constructor(private restaurantDetailsService: RestaurantDetailsService) {
this.restaurantDetailsService.getRestaurant()
.subscribe(restaurant => this.restaurant = restaurant);
}
}
и представление меняется на это:
<b>id: {{restaurant.id}}</b> <br>
<b>Name: {{restaurant.name}}</b><br>
<b>Strasse: {{restaurant.street}}</b><br>
<b>Hausnummer: {{restaurant.streetNumber}}</b><br>
<b>Zusatz: {{restaurant.streetExtra}}</b><br>
<b>Postleitzahl: {{restaurant.postalcode}}</b><br>
<b> longitude: {{restaurant.longitude}}</b><br>
<b> latitude: {{restaurant.latitude}}</b><br>
<b> Tagesangebot:
<li *ngFor = "let m of r.mealPlan">
<b>Mahlzeit: {{m.mealName}}</b><br>
<b>Preis: {{r.price}}</b><br>
</li></b>
Теперь, если я обновлю сервис с помощью функции setRestaurant в другом компоненте, ничего не происходитна мой взгляд:
mapOnClick(evt) {
const self = this;
const map = evt.map;
//this bit checks if user clicked on a feature
const iconDetails = map.forEachFeatureAtPixel(evt.pixel,
function(feature) {
var id = feature.c.split("_")[0];
var restaurant = self.restaurantDetailsService.getRestaurantList().find(
(restaurant) =>{
return restaurant.id == id;
});
return restaurant;
})
self.restaurantDetailsService.setRestaurant(iconDetails);
console.log(self.restaurantDetailsService.getRestaurant())
}
Не могли бы вы помочь мне в том, что мне не хватает?