2016-07-30 2 views
0

Я привязываюсь к использованию метаданных для установки входных атрибутов HTML. Следуя руководству по директивам атрибутов (https://angular.io/docs/ts/latest/guide/attribute-directives.html), я придумал следующее.reference peer (edit: parent) директивный ввод

import "reflect-metadata"; 
import { Directive, ElementRef, Input, OnInit} from '@angular/core'; 

@Directive({ 
    selector: '[myModel]' 
}) 
export class ModelDirectives implements OnInit { 

    private element: any; 

    @Input('myModel') 
    model: any; 

    @Input('myProperty') 
    propertyString: string; 

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

    ngOnInit() { 
     if (this.model.hasOwnProperty(this.propertyString)) { 
      this.element.required = Reflect.getMetadata('required', this.model, this.propertyString); 
      //TODO other metadata 
     } 
    } 
} 

Следующий тег ввода будет иметь требуемый атрибут, если я использую эту директиву.
<input type="text" placeholder="Email" [(ngModel)]="model.username" name="username" [myModel]="model" [myProperty]="'username'" />
Но использование материала2 не будет.
<md-input type="text" placeholder="Email" [(ngModel)]="model.username" name="username" [myModel]="model" [myProperty]="'username'"></md-input>
Я вижу, что компонент ввода материала имеет требуемый вход @Input (https://github.com/angular/material2/blob/master/src/components/input/input.ts#L159), который он передает в собственный тег ввода. Мой вопрос заключается в том, как я могу ссылаться на эту директиву директивы peer из моей директивы? Или я иду по правильному пути?

Примечание: Свойство Имя пользователя определяется как

@required() 
public username: string; 

Где

/** 
* Property decorator for form models. 
* @param isRequired Whether property is required for html form, defaults to true. 
*/ 
export function required(isRequired?: boolean): PropertyDecorator { 
    return Reflect.metadata('required', isRequired ? isRequired : true); 
} 

ответ

0

Так я узнал, что моя [myModel] директива будет считаться ребенок md-input не сверстнику в инъекции в angular2 зависимости , поэтому я использовал следующее: https://angular.io/docs/ts/latest/cookbook/dependency-injection.html#!#find-parent

import "reflect-metadata"; 
import { Directive, ElementRef, Input, OnInit, Optional } from '@angular/core'; 
import { MdInput } from '@angular2-material/input'; 

@Directive({ 
    selector: '[tstModel]' 
}) 
export class ModelDirectives implements OnInit { 

    private inputElement: HTMLInputElement; 

    @Input('tstModel') 
    model: any; 

    @Input('tstProperty') 
    propertyString: string; 


    constructor(elementRef: ElementRef, @Optional() private mdInput: MdInput) { 
     this.inputElement = elementRef.nativeElement; 
    } 

    ngOnInit() { 
      this.mdInput.required = Reflect.getMetadata('required', this.model, this.propertyString); 
     } 
    } 

}