javascript - 使用事件发射器和服务进行跨组件通信的角度异步调用
问题描述
无法将从 subscribe 方法接收到的值存储在模板变量中。
照片细节组件
import { Component, OnInit, Input } from "@angular/core";
import { PhotoSevice } from "../photo.service";
import { Photo } from "src/app/model/photo.model";
@Component({
selector: "app-photo-detail",
templateUrl: "./photo-detail.component.html",
styleUrls: ["./photo-detail.component.css"]
})
export class PhotoDetailComponent implements OnInit {
url: string;
constructor(private photoService: PhotoSevice) {
this.photoService.photoSelected.subscribe(data => {
this.url = data;
console.log(this.url);
});
console.log(this.url);
}
ngOnInit() {
}
}
外部console.log 给出未定义,视图中没有呈现任何内容,但在subscibe 方法内我可以看到该值。那么,我如何在我的视图中显示它?
照片组件
import { Component, OnInit } from "@angular/core";
import { ActivatedRoute, Params, Router } from "@angular/router";
import { FnParam } from "@angular/compiler/src/output/output_ast";
import { AlbumService } from "../service/album.service";
import { Photo } from "../model/photo.model";
import { PhotoSevice } from "./photo.service";
@Component({
selector: "app-photos",
templateUrl: "./photos.component.html",
styleUrls: ["./photos.component.css"]
})
export class PhotosComponent implements OnInit {
selectedAlbumId: string;
photoList: Photo[] = [];
photoSelected: Photo;
isLoading: Boolean;
constructor(
private rout: ActivatedRoute,
private albumService: AlbumService,
private router: Router,
private photoService: PhotoSevice
) { }
ngOnInit() {
this.isLoading = true;
this.rout.params.subscribe((params: Params) => {
this.selectedAlbumId = params["id"];
this.getPhotos(this.selectedAlbumId);
});
}
getPhotos(id: string) {
this.albumService.fetchPhotos(this.selectedAlbumId).subscribe(photo => {
this.photoList = photo;
this.isLoading = false;
});
}
displayPhoto(url: string, title: string) {
console.log(url);
this.photoService.photoSelected.emit(url);
this.router.navigate(["/photo-detail"]);
}
}
请解释一下这是如何工作的以及如何解决它,以便我可以在模板视图中存储和显示从订阅和异步调用接收到的值。
这是两个组件的视图---
photo.component.html
<div *ngIf="isLoading">
<h3>Loading...</h3>
</div>
<div class="container" *ngIf="!isLoading">
<div class="card-columns">
<div *ngFor="let photo of photoList" class="card">
<img
class="card-img-top"
src="{{ photo.thumbnailUrl }}"
alt="https://source.unsplash.com/random/300x200"
/>
<div class="card-body">
<a
class="btn btn-primary btn-block"
(click)="displayPhoto(photo.url, photo.title)"
>Enlarge Image</a
>
</div>
</div>
</div>
</div>
照片细节.component.ts
<div class="container">
<div class="card-columns">
<div class="card">
<img class="card-img-top" src="{{ url }}" />
</div>
</div>
</div>
照片服务.ts
import { Injectable } from "@angular/core";
import { EventEmitter } from "@angular/core";
@Injectable({ providedIn: "root" })
export class PhotoSevice {
photoSelected = new EventEmitter();
// urlService: string;
}
这是我的 github 存储库的链接,我将代码保留在注释中,并在那里使用了不同的方法。如果您检查相册组件,我还订阅了 http 请求并在相册组件的模板变量中分配了值。也有值作为未定义的 oustide subscibe 方法出现,但我可以在模板中访问它。
https://github.com/Arpan619Banerjee/angular-accelerate
这是专辑组件和服务的详细信息, 请将此与事件发射器案例进行比较并解释一下有什么区别 --专辑.component.ts
import { Component, OnInit } from "@angular/core";
import { AlbumService } from "../service/album.service";
import { Album } from "../model/album.model";
@Component({
selector: "app-albums",
templateUrl: "./albums.component.html",
styleUrls: ["./albums.component.css"]
})
export class AlbumsComponent implements OnInit {
constructor(private albumService: AlbumService) {}
listAlbums: Album[] = [];
isLoading: Boolean;
ngOnInit() {
this.isLoading = true;
this.getAlbums();
}
getAlbums() {
this.albumService.fetchAlbums().subscribe(data => {
this.listAlbums = data;
console.log("inside subscibe method-->" + this.listAlbums); // we have data here
this.isLoading = false;
});
console.log("outside subscribe method----->" + this.listAlbums); //empty list==== but somehow we have the value in the view , this doesn t work
//for my photo and photo-detail component.
}
}
相册.component.html
<div *ngIf="isLoading">
<h3>Loading...</h3>
</div>
<div class="container" *ngIf="!isLoading">
<h3>Albums</h3>
<app-album-details
[albumDetail]="album"
*ngFor="let album of listAlbums"
></app-album-details>
</div>
专辑.service.ts
import { Injectable } from "@angular/core";
import { HttpClient, HttpParams } from "@angular/common/http";
import { map, tap } from "rxjs/operators";
import { Album } from "../model/album.model";
import { Observable } from "rxjs";
import { UserName } from "../model/user.model";
@Injectable({ providedIn: "root" })
export class AlbumService {
constructor(private http: HttpClient) {}
albumUrl = "http://jsonplaceholder.typicode.com/albums";
userUrl = "http://jsonplaceholder.typicode.com/users?id=";
photoUrl = "http://jsonplaceholder.typicode.com/photos";
//get the album title along with the user name
fetchAlbums(): Observable<any> {
return this.http.get<Album[]>(this.albumUrl).pipe(
tap(albums => {
albums.map((album: { userId: String; userName: String }) => {
this.fetchUsers(album.userId).subscribe((user: any) => {
album.userName = user[0].username;
});
});
// console.log(albums);
})
);
}
//get the user name of the particular album with the help of userId property in albums
fetchUsers(id: String): Observable<any> {
//let userId = new HttpParams().set("userId", id);
return this.http.get(this.userUrl + id);
}
//get the photos of a particular album using the albumId
fetchPhotos(id: string): Observable<any> {
let selectedId = new HttpParams().set("albumId", id);
return this.http.get(this.photoUrl, {
params: selectedId
});
}
}
如评论中所述,我已在偶数发射器中添加了控制台日志,这是我得到的预期行为。
解决方案
我认为您正在尝试在照片详细信息组件中显示选定的图像,该组件使照片从服务中显示。
该问题未提及您如何创建照片详细信息组件。
- 该组件是在用户选择要显示的照片后创建的吗?
- 是否在用户选择要显示的照片之前创建了组件?
我认为第一个是你想要做的。如果是这样,有两件事...
当您在构造函数中订阅时,订阅中的代码会在 observable 发出一段时间后运行。同时,订阅后的代码,即console.log(url)(外部代码)将运行,因此它是未定义的。
如果订阅是在事件发出之后发生的,即您已经使用 url 发出了事件,但到那时组件还没有订阅服务事件。所以事件丢失了,你什么也得不到。为此,您可以做一些事情
一个。将要显示详细信息的照片添加到 url 并在照片详细信息组件中获取。
湾。将服务中的主题/事件发射器转换为行为主题。这将确保即使您在稍后的时间点订阅,您仍然可以获得上次发出的事件。
C。如果照片详细信息组件在照片组件的模板内,则将 url 作为输入参数发送(@Input() 绑定)。
希望这可以帮助
推荐阅读
- google-ads-api - 如何从排除列表中删除 IP?
- python - 使用包含秒的索引计算列中 True 值的持续时间
- android - 我应该在 build.gradle 的哪里添加 android 配置?
- java - Chrome 浏览器窗口未在 Selenium-grid 节点中最大化
- iot - Contiki 如何使用 uip_send 发送数据包
- python - 如何在 if 语句中查找缺失值索引?
- python-3.x - 使用 Matplotlib 的 FuncAnimation 制作动画:动画方法 (func) 的参数/输入更新
- c# - C# 在代码隐藏中,如何在同一命名空间内的另一个类中引用公共变量?
- javascript - Quill 中的自定义印迹格式无法转换为 HTML
- python - 我正在尝试使用 Python、Flask 和 php 创建一个网页...问题是它显示这些错误:参数“primary_key”未填充错误