使用 Angular 从指令中的 API 调用更新组件数据答案

【问题标题】：Updating component data from an API call in a directive with angular使用 Angular 从指令中的 API 调用更新组件数据
【发布时间】：2019-01-06 11:09:39
【问题描述】：

我是 Angular 新手，遇到了一个问题。我已经创建了一个带有 .net 核心 Web api 后端的简单 Angular 应用程序，但在从我为处理鼠标点击而制作的指令更新组件数据时遇到问题。

我想要发生的是当单击鼠标时，get 请求返回数据并更新页面。我已经阅读了观察者模式并正在使用“rxjs”实现。

这适用于初始页面加载，但是当我单击时，我希望它发送另一个请求并更新页面上的数据。任何帮助将不胜感激！

这是我正在测试的组件 Html

<div class="container">
  <div class="testDiv" appApplyitemclick>
    <img src="######" />
  </div>
  <div class="ShowDiv" *ngFor="let stat of storedItem.statistics" >
    <p>{{stat.name}}</p>
  </div>
</div>

这是我的组件 TS

import { Component, OnInit } from '@angular/core';

import { ItemAPIService } from '../Services/item-api.service';

@Component({
  selector: 'app-item',
  templateUrl: './item.component.html',
  styleUrls: ['./item.component.scss']
})
export class ItemComponent implements OnInit {

  public storedItem: Object = new Object();

  constructor(public ItemApi: ItemAPIService) {

  }

  ngOnInit() {
    this.ItemApi.GetItem().subscribe(x => {
      storedItem = x;
    });
  }
}

这是我的指令

import { Directive, HostListener} from '@angular/core';
import { ItemAPIService } from '../Services/item-api.service'
@Directive({
  selector: '[appApplyitemclick]'
})
export class ApplyitemclickDirective {

  constructor(private api: ItemAPIService) { }

  @HostListener("click", ["$event"])
  public onMouseClick(event: any): void {

     // I WANT TO TO CALL THE API AND UPDATE THE PAGE HERE 
     // this.ItemApi.GetItem()
    }
}

这是我的简单 web api 服务

@Injectable({
  providedIn: 'root'
})
export class ItemAPIService {

  constructor(private http: HttpClient) { }

  GetItem() {
    return this.http.get("http://localhost:1262/api/Item/get");
  }
}

【问题讨论】：

标签： javascript angular typescript

【解决方案1】：

您可以简单地将宿主组件ItemComponent 实例注入指令类ApplyitemclickDirective 并刷新storedItem 字段中的数据：

export class ApplyitemclickDirective {

  constructor(private api: ItemAPIService, private host: ItemComponent) { }

  @HostListener("click", ["$event"])
  public onMouseClick(event: any): void {

    //call API and update the state of the host component
     this.api.GetItem().subscribe(data =>{
     this.host.storedItem = data;

    });
   }
}

【讨论】：

谢谢你，我下班回家试试。如果有效，我会将其标记为已回答 =)
嗨 Amardeep，我注入了这个，但仍然没有得到要更新的数据。我的指令是不同组件上的属性是否重要？
将我的两个组件合并为一个后，此解决方案解决了我的问题。非常感谢！

【解决方案2】：

我不认为指令是正确的选择。你可以点击一下event handler

  <div class="testDiv" (click)="updateData()">
    <img src="######" />
  </div>

并将onInit 逻辑移动到新的updateData 函数中（并从onInit 调用它）。

如果你真的想使用指令，我仍然会使用事件处理程序 - 只需将输出添加到指令。您可以事件甚至发出服务请求的对象结果。

【讨论】：