Преобразование Углового директиву 1.x угловому 2

Question

У меня есть итоговая самозагрузка шаблон с несколькими виджетами, которые я пытаюсь преобразовать в угловую 2. Это один имеет меня в тупике:

.directive('changeLayout', function(){ 

    return { 
     restrict: 'A', 
     scope: { 
      changeLayout: '=' 
     }, 

     link: function(scope, element, attr) { 

      //Default State 
      if(scope.changeLayout === '1') { 
       element.prop('checked', true); 
      } 

      //Change State 
      element.on('change', function(){ 
       if(element.is(':checked')) { 
        localStorage.setItem('ma-layout-status', 1); 
        scope.$apply(function(){ 
         scope.changeLayout = '1'; 
        }) 
       } 
       else { 
        localStorage.setItem('ma-layout-status', 0); 
        scope.$apply(function(){ 
         scope.changeLayout = '0'; 
        }) 
       } 
      }) 
     } 
    } 
}) 

У меня есть новая директива началась (ниже), но свойства объекта is и prop объекта HtmlElement фактически не существуют. Как я могу получить/установить свойство checked элемента ввода, на котором я отбрасываю этот атрибут? Я также думаю, что эта директива предоставляет статус макета через атрибут Output, поэтому родительский компонент может соответствующим образом реагировать.

Может ли кто-нибудь вести меня немного? Я на правильном пути? Благодаря!

Новая директива:

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

import { LocalStorage } from "../common"; 

@Directive({ 
    selector: '[change-layout]', 
    host: { 
     '(change)': 'onChange()' 
    } 
}) 

export class ChangeLayoutDirective implements OnInit { 

    private el: HTMLElement; 
    @LocalStorage() public layoutStatus: Number = 0; 

    @Output() layoutStatusChange = new EventEmitter(); 

    constructor(el: ElementRef) { 
     this.el = el.nativeElement; 
    } 

    ngOnInit() { 
     this.el.prop('checked', false); 
     if(this.layoutStatus === 1) { 
      this.el.prop('checked', true); 
     } 
    } 

    onChange() { this.toggleLayout(); } 

    private toggleLayout() { 
     if(this.el.is(':checked')) { 
      this.layoutStatus = 1; 
     } 
     else { 
      this.layoutStatus = 0; 
     } 
     this.layoutStatusChange.emit({ 
      value: this.layoutStatus 
     }); 
    } 
} 

Answer 1

Я предлагаю использовать HostBinding и HostListener настроить двустороннюю привязку данных к checked собственности вашего элемента узла. Таким образом, вам не нужно использовать ElementRef или nativeElement.

export class ChangeLayoutDirective implements OnInit { 
    private layoutStatus = 0; 
    @Output() layoutStatusChange = new EventEmitter(); 
    @HostBinding('checked') checked = false; 
    @HostListener('change', ['$event.target.checked']) 
    onChange(checked) { 
    console.log('checked =', checked); 
    this.toggleLayout(checked); 
    } 
    ngOnInit() { 
    if(this.layoutStatus === 1) { 
     this.checked = true; 
    } 
    } 
    private toggleLayout(checked) { 
    this.layoutStatus = checked ? 1 : 0; 
    this.checked = checked; 
    this.layoutStatusChange.emit({ 
     value: this.layoutStatus 
    }); 
    } 
} 

Plunker

HostBinding устанавливает свойство связывания между вашей директивы checked собственности и checked имущества/элемента DOM-хозяина.

HostListener устанавливает привязку событий между вашим директивом onChange() и событием change элемента host/DOM.

Использование свойства Output для информирования родителя об изменениях является хорошим подходом.