Пользовательские значения атрибута Angular 5 не определены

Question

Я пытаюсь передать значение в пользовательский атрибут директивы, но когда я пытаюсь зарегистрировать его, он говорит, что он не определен.

Это мой component.html:

<div appRadialMenu [step]="4"></div>

Это моя директива.ts:

import { Directive, ElementRef, Input, OnInit } from '@angular/core';

// jQuery
import * as $ from 'jquery';

@Directive({
  selector: '[appRadialMenu]'
})
export class RadialMenuDirective implements OnInit {
  @Input() step;

  constructor(private elRef: ElementRef) {
      $(elRef.nativeElement).click(function () {
          console.log(this.step);
      }
  }
  ngOnInit() {
      console.log(this.step);
  }
}

Редактировать : Я также пытался использовать

@Input('step') step;

Редактировать 2 : Спасибо, ребята, это сработало, и я внес следующие изменения:

Я изменил привязку события щелчка и переместил его в ngOnInit, также я изменил селектор

selector: 'appRadialMenu'
// ......
@Input('step') step;

constructor(private elRef: ElementRef) {}

ngOnInit() {
    $(this.elRef.nativeElement).click(() => {
        console.log(this.step);
    });
}

component.html:

<appRadialMenu [step]="4"></appRadialMenu>

Answer 1

Вы должны создать псевдоним для входного свойства, чтобы вам не приходилось использовать другое свойство с именем steps в Директиве.

Кроме этого, вы получите измененный счетчик stepsв вашем ngOnChanges.Поэтому используйте это вместо ngOnInit.

Это должно быть вашей директивой.

import { Directive, ElementRef, Input, OnChanges } from '@angular/core';

@Directive({
  selector: '[appRadialMenu]'
})
export class RadialMenuDirective implements OnChanges {
  @Input('appRadialMenu') step;

  constructor(private elRef: ElementRef) {
  }

  ngOnChanges() {
      console.log('Got steps as: ', this.step);
  }

}

Поскольку вы будете использовать директиву appRadialMenu с синтаксисом привязки атрибута, она должна бытьназначил свойство, которое будет определено в вашем классе компонентов.

Вот как вы можете использовать его в своем шаблоне компонента:

<div [appRadialMenu]="steps"></div>

Вот Sample StackBlitz для справки.