向动态生成的组件添加指令

时间:2017-04-08 15:32:48

标签: angular angular2-template angular2-services angular2-directives

我在寻找,如何创建一个组件dinamicamente y跟随Equivalent of $compile in Angular 2步骤并运行完美

import {Component, Input} from '@angular/core';
import {Observable}       from "rxjs/Rx";
@Component({
selector: 'string-editor',
template: `
<dl>
  <dt>{{propertyName}}</dt>
  <dd>
    <input
      type="text"  
      [(ngModel)]="entity[propertyName]"  />
  </dd>
</dl>`,
})
export class StringEditor {

@Input()  public propertyName: string;
@Input()  public entity: any;
};

我有一个名为:

的指令
import { Directive, ElementRef, Input } from '@angular/core';
declare var $:any;
@Directive({ selector: '[myHighlight]' })
export class HighlightDirective {
constructor(el: ElementRef) {
    el.nativeElement.style.backgroundColor = 'yellow';
}
}

现在我喜欢在我的组件中使用仍然不存在的内容,添加上面声明的指令以及何时生成此组件的指令也是如此,但没有工作,此组件是使用编译器等创建的

@Component({
selector: 'string-editor',
template: `
<dl myHighlight>
  <dt>{{propertyName}}</dt>
  <dd>
    <input
      type="text"  
      [(ngModel)]="entity[propertyName]"  />
  </dd>
</dl>`,
})

生成组件时如何制作具有指令的属性

0 个答案:

没有答案