Question

在删除图片后，我一直试图找出更新组件的方法。如果我刷新页面它工作，不再可见，但我希望它立即更新。我一直在尝试不同的方法，比如使用ChangeDetectorRef等，但没有运气。非常感谢任何指导。

我的服务看起来像这样：

removeImage(id) {
    const headers = new Headers({ 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest' });
    const options = new RequestOptions({ headers: headers, withCredentials: true }); // Create a request option
    const url = this._config.apiEndpoint + 'images/' + id + '/preview';

    return this.http
    .delete(url, options)
    .map(response => {
        if (response.status === 200) {
            return response.ok;
        } else if (response.status === 400) {
            return response.text;
        }
    })
    .catch(this.exceptionService.catchBadResponse)
    .finally(() => { });
}

我的组件如下所示：

@Component({
    selector: 'app-card',
    templateUrl: 'card.component.html',
    styleUrls: ['card.component.less']
})

export class CardComponent {
    @Input() card;

removeImage(id) {
        this.cardService.removeImage(id)
        .toPromise()
        .then(res => {
            return res; // returns true
        });
}

html看起来像这样：

<div uk-dropdown="pos: top-right; delay-hide: 0; mode: click">
   <ul class="uk-nav uk-dropdown-nav">
      <li><a class="uk-dropdown-close textred" (click)="removeImage(card.Id)">Remove image</a></li>
   </ul>
</div>

我有一个获取图像的指令，如下所示：

   @Directive({
   selector: '[card-image]',
   host: {
    '[src]': 'imageData'
  }
 })
 export class ImageSrcDirective implements OnInit {


@Input('card-image') id: number;
configUrl = CONFIG.appConfig.apiEndpoint + 'images/';
defaultImage = CONFIG.images.card;
url: string;
imageData: any = '';
options: RequestOptions;

constructor(private http: Http, private sanitizer: DomSanitizer) { 
    const headers = new Headers({ 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest' });
    this.options = new RequestOptions({ headers: headers, withCredentials: true });
}

ngOnInit() {
    if(this.id){
        this.url = this.configUrl + this.id + "/preview";
        this.http.get(this.url, this.options)
            .map(image => image.json())
            .subscribe((data) => {
                const imageurl = data.ImageData.length > 0 ? data.ImageData : this.defaultImage;
                this.setImage(imageurl);
            }, (err) => {
                console.log("err fetching image: ", err);
                console.log("dta: ");
            });

    }else{
        this.setImage(this.defaultImage);
    }
}

setImage(imageurl){
    this.imageData = this.sanitizer.bypassSecurityTrustUrl(imageurl);
}

}

此指令在同一组件html中使用：

 <div *ngIf="card.IsMine" class="">
  <a [routerLink]="['', space.Id]" routerLinkActive="active">
    <div *ngIf="!space.IsUploadingImage" class="uk-card-media-top uk-overflow-hidden">
        <img [space-image]="space.Id" class="uk-animation-kenburns" alt="">
    </div>
  </a>

 <div class="uk-card-body">
    <div class="boundary-align">
        <span class="more-btn" uk-icon="icon: more-vertical"></span>
        <div uk-dropdown="pos: top-right; delay-hide: 0; mode: click">
            <ul class="uk-nav uk-dropdown-nav">
                <li><a class="uk-dropdown-close textred" (click)="removePreviewImage(space.Id)">Remove preview image</a></li>
            </ul>
        </div>
    </div>
 </div>

Answer 1

所以我解决了问题（不是最佳实践），通过在click上获取整个对象而不是id，其中响应为我提供了一个我设置为true的布尔值，并且在调用服务时我将其设置为false组件，如：

@Component({
    selector: 'app-card',
    templateUrl: 'card.component.html',
    styleUrls: ['card.component.less']
})

export class CardComponent {
    @Input() card;
      removeImage(imageObj) {
        imageObj.hasImage = true;
        this.cardService.removeImage(card.Id)
        .toPromise()
        .then(res => {
            imageObj.hasImage = false;
        });
    }
}

谢谢你的时间！

删除图像后角度组件不会更新

1 个答案: