Question

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

我想发生的是单击鼠标时，一个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");
  }
}

Answer 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;

    });
   }
}

Answer 2

我认为指令不是正确的选择。您只需点击一下event handler

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

并将onInit逻辑移至新的updateData函数（并从onInit进行调用）。

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

使用angular指令在API调用中更新组件数据

2 个答案: