मेरे प्रोजेक्ट में कुछ पठनीय त्रुटियों के कारण ElementRef के nativeelement.value का उपयोग करना अनिवार्य है। केवल मेरा निर्देश

export class DeliveryAcrossDirective {
  @Input('key') key: string;
  @Input('component') component: string;
  constructor(
    private store: Store,
    private elementRef: ElementRef<HTMLInputElement>
  ) {
    this.key = '';
    this.component = '';
  }
  @HostListener('change') onChange() {
    console.log('noticed something');

    this.store.dispatch<IAction<IAdjust>>({
        type: RDX_DELIVERY_ACROSS_ADJUST,
        payload: {
          key: this.key,
          value: this.elementRef.nativeElement.value
        },
        component: this.component
      })
  }

}

मेरी चटाई चयन से परिवर्तन घटना पर कब्जा नहीं करता है

<mat-form-field class="full-width" [@transformRightLeftStateTrigger]="stateDown | async">
  <mat-label>
    {{ country | async }}
  </mat-label>
  <mat-select [formControl]="countryFormControl"
  appDeliveryAcross
  [key]="'iso'"
  [component]="'delivery-across'" >
    <mat-option *ngFor="let language of (languages | async)"  [value]="language.value">
      {{ language.country }}
    </mat-option>
  </mat-select>
</mat-form-field>

जबकि क्लासिक इनपुट करते हैं

        <mat-form-field class="full-width" [@transformRightLeftStateTrigger]="stateDown | async">
          <input matInput
          [formControl]="minFormControl"
          [errorStateMatcher]="errorStateMatcher"
          placeholder="Minimaal"
          appDeliveryAcross
          [key]="'min'"
          [component]="'delivery-across'"
          type="number">
        </mat-form-field>

क्या किसी को निर्देश के साथ एक चटाई से परिवर्तन घटना को कैप्चर करने का तरीका पता है?

2
Noah Bergh 4 सितंबर 2021, 23:14

2 जवाब

सबसे बढ़िया उत्तर

मुझे यकीन नहीं है कि आप कोणीय सामग्री के किस संस्करण का उपयोग कर रहे हैं, लेकिन शायद change ईवेंट सरल mat-select https://stackoverflow.com/a/50223943/9602452

ऐसा लगता है कि आपने mat-selects . के लिए अपने निर्देश को संशोधित कर दिया है

0
D Pro 4 सितंबर 2021, 20:29

mat-select के परिवर्तनों का पता लगाने के लिए आपको HostListener की आवश्यकता नहीं है, बस MatSelect के selectionChange को सब्सक्राइब करें

export class DeliveryAcrossDirective implements OnInit, OnDestroy {
  selectionSub: Subscription;

  constructor(
    private host: MatSelect
  ) {
  }

  ngOnInit(): void {
    this.selectionSub = this.host.selectionChange.subscribe(option => {
      console.log(option);
      // Do something
    });
  }

  ngOnDestroy(): void {
    this.selectionSub?.unsubscribe();
  }
}
0
Sadegh 4 सितंबर 2021, 20:50