征求关于角2指令实现的建议

Question

我正在设计一个文本编辑组件。我已经将基本文本编辑器开发到了最低可行的状态。现在，我希望能够添加实现字段文本/模板的能力。

我想象这个标记看起来会是这样的：

​

//basic text editor
<text-editor></text-editor>

//text editor with templates
<text-editor *templateProvider='templateProviderIdentifier'></text-editor>

//templates used on some future item
<not-yet-defined *templateProvider='templateProviderIdentifier'></not-yet-defined>

​

指令的Angular2文档表明，指令构造器可以注入ElementRef，从而使属性指令访问DOM元素，但是属性指令如何获得对控制器的访问？

我不想编辑文本编辑器，因为模板可能在其他地方使用。理想情况下，当属性出现在元素上时，指令会抓取相关控制器并测试它是否有可用的接口。如果检测到，则通过将自身设置为元素上的行为修饰符或子对象的装饰器来修改组件。

我正在寻找关于属性指令如何访问Controller对象的信息，以及您在我计划的方法中看到的任何技巧或技巧或陷阱。

有关我所阅读的手册页的快速参考，我包括以下链接：

• 属性指令
• 结构指令
• ElementRef

Answer 1

可以使用输入值为angular2的组件，如下所示：

import { Component, OnInit, AfterViewChecked, AfterViewInit, Input, Output, ElementRef, EventEmitter } from '@angular/core';

@Component({
    selector: 'text-editor',
    template: require('./text-editor.component.html'),
    styleUrls: ['css/text-editor.css']
})
export class TextEditorComponent implements OnInit, AfterViewInit {

    @Input() templateProvider: any;
    @Output() something_for_output = new EventEmitter<any>();

    private el:HTMLElement;

    constructor(elementRef:ElementRef) {
    }

    ngAfterViewInit()
    {
    }

    ngAfterViewChecked()
    {
    }

    ngOnInit()
    {
    }
}

然后您可以在html中使用这个：

 <text-editor [templateProvider]='something'></text-editor>