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