[英]Access Typescript variable value in javascript inside Angular 2 Component
我在 Angular 2 中编写了一个可重用的组件来在我的应用程序中显示Summernote
WYSIWYG 编辑器。 该组件接受 3 个输入参数,这些参数被设置为渲染textarea
属性,如 id、name 和用作正文的最后一个。 我的问题是在这个组件中我正在初始化 Summernote 插件并创建编辑器。 在这里,我不想对选择器名称进行硬编码,而是希望组件接收到的动态值作为组件的输入参数。 相关代码如下。
import {Component, ElementRef, OnInit, EventEmitter, Input, Output, Inject, ComponentRef} from '@angular/core';
import {Http} from '@angular/http';
declare var $: any;
@Component({
selector: 'editor',
template: `<textarea id="{{eid}}" name="{{ename}}" class="form-control">{{body}}</textarea>`
})
export class EditorComponent {
@Input() body: string;
@Input() eid: string;
@Input() ename: string;
@Output() onContentChanged: EventEmitter<any>;
constructor(){}
ngAfterViewInit()
{
$(document).on("pageLoaded", function (){
console.log("pageLoaded");
$("#body").summernote({
height: '200px',
callbacks: {
onChange: function(contents, $editable) {
$("#body").val(contents);
}
}
});
});
}
}
在这里,您可以看到我在ngAfterViewInit
块中使用了$("#body")
两次。 我希望将其替换为eid
变量。 我试过{{eid}}
但它不起作用并在浏览器控制台中引发以下错误。
EXCEPTION: Syntax error, unrecognized expression: #{{eid}}
this.eid
也不能在这里使用,因为我们在 javascript 方法中而不是在打字稿中。
我在我的另一个视图文件中使用这个组件作为指令。
<editor [body]="page.body" eid="body" ename="body"></editor>
该template
在部件块与动态值正确设定。 只有 javascript 部分是我的问题。
有没有其他方式我在这里失踪?
PS到目前为止效果很好。 我只想使初始化完全动态化,以便我可以在任何具有不同 ID 的地方使用它。
您可以尝试使用箭头函数而不是函数来保持相同的上下文。
$(document).on("pageLoaded", () => {
console.log("pageLoaded");
$(this.eid).summernote({
height: '200px',
callbacks: {
onChange: (contents, $editable) => {
$(this.eid).val(contents);
}
}
});
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.