Angular 2 @Input - 子コンポーネントのIDプロパティを親コンポーネントからバインドする方法は？

Question

親コンポーネントでは、固有のIDを持つ子コンポーネントを作成したいので、その固有のIDを子コンポーネントに渡したいので、子コンポーネントはそのIDをそのテンプレートに置くことができます。

親テンプレート：

import { Component, Input } from '@angular/core' 

var loadScript = require('scriptjs'); 
declare var CKEDITOR; 

@Component({ 
    selector: 'ckeditor', 
    template: `<div [id]="ckEditorInstanceID">This will be my editor</div>` 
}) 
export class CKEditor { 

    @Input() ckEditorInstanceID: string; 

    constructor() { 
     console.log(this.ckEditorInstanceID) 
    } 

    ngOnInit() { 

    } 

    ngAfterViewInit() { 
     loadScript('//cdn.ckeditor.com/4.5.11/standard/ckeditor.js', function() { 
     CKEDITOR.replace(this.ckEditorInstanceID); 
     console.info('CKEditor loaded async') 
     }); 
    } 
} 

は、私が何をしないのです：

<ckeditor [ckEditorInstanceID]="someUniqueID"> </ckeditor> 

ここでは、子コンポーネントのですか？私は子コンポーネントに "someUniqueID"の値を受け取らせるように見えません。常に定義されていません。

UPDATE：私は値「someUniqueIDを受け取るために子コンポーネントを取得することができたコードは、上記udpatedしかし、私はthisが定義されていないので、this.ckEditorInstanceIDを呼び出すことにより、@Inputプロパティを参照することはできません

するにはどうすればよいです。。。私は@Input経由で持ち込まプロパティを参照する？

Answer 1

入力idに名前を付けないでください。それはHTMLElementのid属性と矛盾です。

Answer 2

トリC kは@David Bulteのような矢印の関数を使うことでした。

loadScript('//cdn.ckeditor.com/4.5.11/standard/ckeditor.js',() => { 
    CKEDITOR.replace(this.ckEditorInstanceID); 
    console.info('CKEditor loaded async') 
    }); 

矢印関数は this.ckEditorInstanceIDにアクセスすることができるいくつかの理由

が、通常の関数（）{} this.ckEditorInstanceIDにアクセスすることはできません。私はなぜ、誰かが私のために推論に啓発することができるのか分からない。

また、私はこのように私のマークアップを変更しなければならなかった：

<ckeditor [ckEditorInstanceID]="'editor1'"> </ckeditor> 
<ckeditor [ckEditorInstanceID]="'editor2'"> </ckeditor> 

そしてckEditorInstanceIDである[]内の名前に@Inputプロパティを設定し、また、テンプレートソースはプロパティ名でなければなりませんckEditorInstanceID、[id]="ckEditorInstanceID"など。

親HTMLセレクタからIDを受け取り、完全に動作する子コンポーネント：this.ckEditorInstanceIdが仕事に行くのではありません

import { Component, Input } from '@angular/core' 

var loadScript = require('scriptjs'); 
declare var CKEDITOR; 

@Component({ 
    selector: 'ckeditor', 
    template: `<div [id]="ckEditorInstanceID">This will be my editor</div>` 
}) 
export class CKEditor { 

    @Input() ckEditorInstanceID: string; 

    constructor() {} 

    ngAfterViewInit() { 

     loadScript('//cdn.ckeditor.com/4.5.11/standard/ckeditor.js',() => { 
     CKEDITOR.replace(this.ckEditorInstanceID); 
     console.info('CKEditor loaded async') 
     }); 
    } 
}