角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オブジェクトにアクセスする方法や、私が計画しているアプローチで見られるヒントやトリックや落とし穴についての情報を探しています。私が読んだのマニュアルページへのクイックリファレンスについては

、私は以下のリンクが含ま：あなたが入力してangular2コンポーネントを使用することができます

• Attribute Directives
• Structural Directives
• ElementRef

Answer 1

を値 は次のとおりです。

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>