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

Question

In my parent component, I want to create a child component with a unique ID associated with it, and I want to pass that unique ID into the child component, so the child component can put that ID on its template.

Parent template:

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

Here is the child component:

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

What am I missing? I can't seem to get the child component to receive the value of "someUniqueID". it is always undefined.

UPDATE: I was able to get the child component to receive the value "someUniqueID. Code udpated above. However, I cannot reference the @Input property by calling this.ckEditorInstanceID because this is undefined.

How do I reference the property I brought in via @Input?

Answer 1

Don't name inputs id . That's conflicting with the id attribute of the HTMLElement .

Answer 2

The trick was to use an arrow function like @David Bulte mentioned.

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

For some reason the arrow function can access this.ckEditorInstanceID , but a regular function() {} cannot access this.ckEditorInstanceID . I don't know why, maybe someone can enlighten me to the reasoning for this.

In addition, I had to change my markup like this:

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

And set the @Input property to the name inside the [] which is ckEditorInstanceID , and also the template source should be the property name ckEditorInstanceID , like [id]="ckEditorInstanceID" .

Full working child component that receives the ID from the parent html selector:

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