Angular 2 @Input — Как привязать свойство ID дочернего компонента к родительскому компоненту?

#javascript #angular #input #typescript #output

#javascript #angular #ввод #typescript #вывод

Вопрос:

В моем родительском компоненте я хочу создать дочерний компонент с уникальным идентификатором, связанным с ним, и я хочу передать этот уникальный идентификатор в дочерний компонент, чтобы дочерний компонент мог поместить этот идентификатор в свой шаблон.

Родительский шаблон:

 <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. Код, описанный выше. Однако я не могу ссылаться на свойство @Input путем вызова this.ckEditorInstanceID , потому this что оно не определено.

Как мне ссылаться на свойство, которое я ввел через @Input?

Комментарии:

1. this.ckEditorInstanceId не будет работать, вы должны использовать функцию со стрелкой

2. Как бы я это сделал?

3. Функция Iso() {} вы пишете () => {}

4. Функции со стрелками имеют область действия блока

5. Если вы можете опубликовать пример кода, это будет высоко оценено. Мой мозг не понимает, что делать :-/

Ответ №1:

Не называйте входные id данные. Это противоречит id атрибуту HTMLElement .

Ответ №2:

Хитрость заключалась в использовании функции со стрелкой, подобной упомянутой @David Bulte.

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

По какой-то причине функция arrow может получить доступ this.ckEditorInstanceID , но обычная функция() {} не может получить доступ this.ckEditorInstanceID . Я не знаю почему, может быть, кто-нибудь может просветить меня по этому поводу.

Кроме того, мне пришлось изменить свою разметку следующим образом:

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

И установите для свойства @Input значение name внутри [] , которое есть ckEditorInstanceID , а также источником шаблона должно быть имя свойства ckEditorInstanceID , например [id]="ckEditorInstanceID" .

Полностью рабочий дочерний компонент, который получает идентификатор от родительского селектора html:

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