将Angular 1.x指令转换为Angular 2

Stuart 发表于 Dev

斯图尔特

我有一个带有一些小部件的wrapper-bootstrap模板，我想将它们转换为Angular2。这让我很困惑：

.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';
                    })
                }
            })
        }
    }
})

我有一个新的指令开始（在下面），但是HtmlElement对象的is和prop属性实际上并不存在。如何获得/设置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
        });
    }
}

马克·拉杰克（Mark Rajcok）

我建议使用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
    });
  }
}