Angular 从指令中的组件访问数据

Question

所以我正在尝试为将查询 API 并显示 select 的结果列表的项目构建一个 "autocomplete" 指令。我有一个显示带有简单输入框的模态的组件。我需要能够在框中键入以搜索成员，单击成员并将其添加到 component.

中的数组

编辑： 我遇到的问题是，当我调用 this.wlAutocomplete.next(value); 时，它返回到我的组件并使用输入字段中的正确值进行 API 调用，但它不会 return将数据返回到指令以处理来自 API 的响应。

StackBlitz 示例： https://stackblitz.com/edit/angular-11erew

该组件将跟踪 selected 成员的数组。我需要能够：

在Component中调用我的API获取数据return到指令
该指令需要读取数据并在输入框下方显示一个列表（我这里可以做到HTML）
单击下拉列表中的列表项会将 selection back 发送到组件以根据需要进行处理，例如。将其添加到数组中。

我的组件有一个方法：

queryMembers(value: string): Subscription {
  return this.memberService.query({ term: value, groupKey: this.group.groupKey })
    .subscribe((members) => {
      console.log(members);
      return this.searchMemberList = members;
    });
}

我在模板中使用的是这样的：

<input (wlAutocomplete)="queryMembers($event)" class="uk-search-input" type="search" placeholder="Search...">

指令代码如下：

@Directive({
  selector: 'input[wlAutocomplete]'
})
export class AutocompleteDirective {
  modelChanged: Subject<string> = new Subject<string>();
  subscription: Subscription;
  debounce: number = 500;

  constructor() {
    this.subscription =
      this.modelChanged
        .pipe(debounceTime(this.debounce))
        .subscribe(value => {
          this.wlAutocomplete.next(value); // I need to get the data from component method passed into `wlAutocomplete`
        });
  }

  @Output() wlAutocomplete: EventEmitter<any> = new EventEmitter();

  @HostListener('input', ['$event'])
  onChange($event) {
    this.modelChanged.next($event.target.value);
  }
}

Answer 1

好的，我想我明白你现在想做什么了，谢谢你的例子。您想将值从父模板发送到指令吗？基本上你的指令需要输入，并在父级中绑定到它们。

查看 this question for more

import {Directive, EventEmitter, HostListener, Input, Output} from '@angular/core';
import {Subject, Subscription} from "rxjs";
import {debounceTime} from "rxjs/operators";

@Directive({
  selector: 'input[wlAutocomplete]'
})
export class AutocompleteDirective {
  modelChanged: Subject<string> = new Subject<string>();
  subscription: Subscription;
  debounce: number = 500;

  // label and type your input, then handle it however you like
  @Input() value: any;

  constructor() {
    this.subscription =
      this.modelChanged
        .pipe(debounceTime(this.debounce))
        .subscribe(value => {
          console.log('value', value)
          console.log('directive', this.wlAutocomplete.next(value)); // I need to get the data from component method passed into `wlAutocomplete`
        });
  }

  @Output() wlAutocomplete: EventEmitter<any> = new EventEmitter();

  @HostListener('input', ['$event'])
  onChange($event) {
    console.log('directive called')
    this.modelChanged.next($event.target.value);
  }
}

模板

// bind to the input in the template
    AutoComplete: <input type="text" [value]="value" (wlAutocomplete)="queryMembers($event)" />

组件

import { Component } from '@angular/core';
import {Subscription} from "rxjs";
import {MemberService} from './member.service'
import {Member} from './member';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  // send value to directive 
  value: any;
  name = 'Angular';
  group: any = { groupKey: 'test' };
  debugMemberList: Member[];
  constructor(private memberService: MemberService){}

  queryMembers(value: string): Subscription {
  return this.memberService.query({ term: value, groupKey: this.group.groupKey })
    .subscribe((members) => {
      console.log('In component: ', members);
      this.value = members;
      return this.debugMemberList = members;
    });
  }
}

我不确定这是否是您正在寻找的确切实现，但希望它能为您提供足够的有关在父指令和指令之间传输数据的信息，以便您弄明白。

Angular 从指令中的组件访问数据

Angular Access data from Component in Directive

rxjs

typescript

angular

rxjs6