在Angular 2中寻求关于指令实现的建议

我正在设计一个文本编辑组件。我已经将基本的文本编辑器开发成了一个最小可行的状态。现在，我希望能够添加实现字段文本/模板的功能。在Angular 2中寻求关于指令实现的建议

我想象的标记会是这个样子：

//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元素，但属性指令如何访问控制器？

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

我正在查找有关属性指令如何访问控制器对象以及您在我计划的方法中看到的所有提示或技巧或陷阱的信息。

对于快速参考，本人已阅读了手册页，我包括以下几个环节：

来源

2017-05-11 Jared Clemence

可以使用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>

来源

2017-05-12 00:03:55 Houtan

我喜欢这个建议，但随后的文本编辑必须知道和“知道”模板提供的存在。这实际上是我目前的实施，所以我喜欢你的想法。在新的设计中，文本编辑器有一个带有内容窗口界面的内容窗口，我希望模板指令可以提取内容窗口，将其包装（作为装饰器，它具有相同的界面）... –

。 ..然后将包装的对象放回到组件中。通过这种方式，编辑器只处理内容窗口，并且不知道模板提供者实际上是作为其中的一个层插入的。 –

在Angular 2中寻求关于指令实现的建议

回答

相关问题