javascript - Angular 2 @Input - 如何从父组件绑定(bind)子组件的 ID 属性？

Question

在我的父组件中，我想创建一个具有与其关联的唯一 ID 的子组件，并且希望将该唯一 ID 传递到子组件中，以便子组件可以将该 ID 放在其模板上。

父模板:

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

这是子组件:

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')
      });
   }
}

我错过了什么？我似乎无法让子组件接收“someUniqueID”的值。它始终是未定义的。

更新:我能够让子组件接收值“someUniqueID”。上面更新了代码。但是，我无法通过调用 this.ckEditorInstanceID 来引用 @Input 属性，因为 this 是未定义。

如何引用通过@Input引入的属性？

Answer 1

不要命名输入id。这与 HTMLElement 的 id 属性冲突。