Angular - динамическая установка директивы атрибута в угловом компоненте с использованием Render2 - PullRequest
Новая
       26

Angular - динамическая установка директивы атрибута в угловом компоненте с использованием Render2

0 голосов
/ 05 июня 2019

Я создал компонент в своем приложении, который действует как обертка для тега ввода (я делаю свою собственную библиотеку пользовательского интерфейса для забавы). Мой компонент будет использоваться так. 

<sio-input [label]="'Sio Input Label'">
        <input type="text" name="">
</sio-input>

Смысл в том, чтобы динамически добавлять классы и функциональные возможности CSS, чтобы разработчику не приходилось это делать. Вот мой компонент (я действительно уменьшил код для удобства чтения) 

@Component({
  selector: 'sio-input',
  templateUrl: './input.component.html', // only contains <ng-content></ng-content>
  styleUrls: ['./input.component.scss'],

})
export class InputComponent implements OnInit {

  @Input() label: string;
  // this component used Render2 - https://angular.io/api/core/Renderer2
  constructor(private elRef: ElementRef, private renderer: Renderer2) {
  }

  ngOnInit() {
    // if a label exist prepend it to the HTML
    if (this.label) {
      const formInput = this.elRef.nativeElement.querySelector('input');
      const appendLabel = this.renderer.createElement('LABEL');
      const textNode = this.renderer.createText(this.label);
      this.renderer.addClass(appendLabel, 'sio-input__label');
      this.renderer.appendChild(appendLabel, textNode);
      this.renderer.insertBefore(this.elRef.nativeElement, appendLabel, formInput);

      // add the directive
      this.renderer.setAttribute(formInput, 'sioInput', null);
    }
  }
}

@Directive({
  selector: '[sioInput]'
})
export class SioInputDirective {
  @HostListener('focus', ['$event.target'])
  onFocus(event) {
    console.log('Boom! We Have Focus');
  }
}

Как видите, я хочу динамически добавить директиву атрибута к formInput, который я нахожу в DOM компонента. К сожалению, это не работает, так как вывод, представленный renderer.setAttribute, берет имя атрибута 'sioInput' и отображает его 'sioinput', поэтому Angular не распознает директиву атрибута. Должен ли я вручную указывать имя директивы в шаблоне HTML на входе, естественно, все работает, но я хочу, чтобы это было динамическим. Что я делаю неправильно? Как динамически установить директиву атрибута без преобразования имени в нижний регистр.

Заранее большое спасибо - если я плохо объяснил свою проблему или это сбивает с толку, пожалуйста, скажите, и я перефразирую свой вопрос.

1 Ответ

0 голосов
/ 05 июня 2019

Angular - это скомпилированный язык: вы пишете TS, он преобразует его в JS.

Селекторы в декораторах: до сборки : их нельзя применять после сборки .

Это означает, что вам следует использовать не средство визуализации (которое будет действовать post-build ), а сам шаблон для управления вашими угловыми компонентами.

В качестве идентификатора директива в компоненте, как правило, позволяет компоненту использовать @ContentChild для управления контентом через <ng-content>.За исключением добавления пользовательских классов в elementRef и, возможно, реализации средства доступа к значению элемента управления, директива мало что делает.

Я предлагаю вам взглянуть на Материальные элементы ввода или PrimeNG , чтобы увидеть, как они это делают, поскольку они широко используются и, как правило, очень просты в использовании!

...