我有一个应用程序,其中包括通过从示例集合中选择图像来更改背景图像的操作,其想法是编写一个服务,解析图像的 json 列表链接并定义背景链接。 所以我有一个组件 1:用于查看所选图像 组件 2:用于加载图像+选择一张图像的操作 服务:用于更改所选图像
服务设置了默认在服务本身中强加的第一个图像的问题,当我在服务解析的图像和在组件 2 中查看的图像之间选择一个图像时,无法更改它,特别是这个 lign从组件 2 的 Angular 来看:
<img class="contentSizes" src={{BackService.imageLink}}>
组件 1:
@Component({
selector: 'content',
templateUrl: 'content.component.html',
styleUrls: ['content.component.css'],
providers:[BackgroundService],
directives: [FORM_DIRECTIVES],
})
export class ContentComponent {
constructor(public BackService : BackgroundService )
{
}
}
和模板:
<div>
<img class="contentSizes" src={{BackService.imageLink}}>
</div>
组件2:(通过服务加载图像并选择一张作为背景
@Component({
selector: 'housepic',
templateUrl: '.housepic.component.html',
styleUrls: ['housepic.component.css'],
providers:[BackgroundService],
viewProviders:[HTTP_PROVIDERS],
directives:[ContentComponent]
})
export class HousepicComponent implements OnInit, OnDestroy{
images_list;
constructor(
public BackService : BackgroundService)
{
this.BackService = BackService;
}
onSelectImage(lien){
console.log("housepic"+lien.toString());
this.BackService.imageChange(lien);
}
ngOnInit(){
this.BackService.getjson().subscribe(people => this.images_list = people);
}
ngOnDestroy(){
}
}
和模板:
<div class="accordian">
<ul>
<li *ngFor="#img of images_list">
<div class="image_title">
<a href="#">Exemple</a>
</div>
<a (click)="onSelectImage(img.image)" >
<img src="{{img.image}}" style="height: 320px ; width: 640px"/>
</a>
</li>
</ul>
</div>
和服务:
import {Injectable,EventEmitter,Output} from 'angular2/core';
import {Http} from "angular2/http";
import 'rxjs/add/operator/map';
@Injectable()
export class BackgroundService{
constructor (public http : Http){
this.http= http;
/*this.imageLink = '../../../dev/backgrounds/int4.png';*/
console.log("lien initial"+ this.getImage());
this.imageChange('../../../dev/backgrounds/int4.png');
}
/*background variable link*/
public _imageLink :string
get
set imageLink(value:string) {
console.log("nnnnn"+value)
this._imageLink = value;
}
/*parsing des images temoins */
getjson(){
return this.http.get('dev/JsonData/maisonsImages.json')
.map(res => res.json())
}
/*action de changement de l image */
public imageChange (lien:string):void{
this._imageLink=lien;
console.log("imageLink = "+this._imageLink)
console.log("le lien recu = "+lien);
}
/*recuperer l image selectionne */
getImage(){
console.log("yyyy"+this._imageLink)
return this._imageLink;
}
imageLink():string {
return this._imageLink;
}
set imageLink(value:string) {
console.log("nnnnn"+value)
this._imageLink = value;
}
/*parsing des images temoins */
getjson(){
return this.http.get('dev/JsonData/maisonsImages.json')
.map(res => res.json())
}
/*action de changement de l image */
public imageChange (lien:string):void{
this._imageLink=lien;
console.log("imageLink = "+this._imageLink)
console.log("le lien recu = "+lien);
}
/*recuperer l image selectionne */
getImage(){
console.log("yyyy"+this._imageLink)
return this._imageLink;
}
最后是服务要解析的数据(图像链接)的 json 文件:
[
{ "id": 1, "image": "../../../dev/backgrounds/int0.jpg" },
{ "id": 2, "image": "../../../dev/backgrounds/int1.jpg" },
{ "id": 3, "image": "../../../dev/backgrounds/int2.jpg" },
{ "id": 4, "image": "../../../dev/backgrounds/int3.jpg" },
{ "id": 5, "image": "../../../dev/backgrounds/int4.png" }
]
还有我的文件 boot.ts :
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from "./app.component";
import {ROUTER_PROVIDERS} from "angular2/router";
import {MATERIAL_PROVIDERS} from 'ng2-material/all';
import {BackgroundService} from "./services/background/BackgroundService";
import {ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy} from 'angular2/router';
import {HTTP_PROVIDERS} from "angular2/http";
import {provide} from "angular2/core";
bootstrap(AppComponent,[ROUTER_PROVIDERS,HTTP_PROVIDERS,BackgroundService,MATERIAL_PROVIDERS,
provide(LocationStrategy, { useClass: HashLocationStrategy })
]);
最佳答案
不要将服务添加到每个组件的提供者
providers:[BackgroundService],
这样每个组件都会获得它自己的实例。
相反,仅将其添加到公共(public)父级上。要与整个应用程序共享它,请将其添加到 AppComponent
(根组件)或 bootstrap(AppComponent, [BackgroundService]);
关于json - 如何在 Angular2 中与其动态交互的 2 个组件中注入(inject)相同的服务,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36161055/