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”的值。它总是未定义的。

UPDATE：我能够让子组件接收值“someUniqueID。上面的代码。但是，我无法通过调用this.ckEditorInstanceID来引用@Input属性，因为{{ 1}}未定义。

如何通过@Input引用我带来的属性？

Answer 1

不要输入id。这与id的{{1}}属性相冲突。

Answer 2

诀窍是使用像@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>

并将@Input属性设置为[]中ckEditorInstanceID内的名称，模板源也应该是属性名ckEditorInstanceID，如[id]="ckEditorInstanceID"。

从父html选择器接收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() {}

   ngAfterViewInit() {

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

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

2 个答案: