在Angular 2组件中使用javascript访问Typescript变量值

Access Typescript variable value in javascript inside Angular 2 Component

本文关键字：javascript 访问 Typescript 变量值 Angular 组件      更新时间：2023-09-26

我在Angular 2中编写了一个可重用的组件，用于在我的应用程序中显示Summernote所见即所得编辑器。该组件接受3个输入参数，这些参数被设置为呈现的textarea的属性，如id、名称和最后一个用作主体。我的问题是，在这个组件中，我初始化了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方法中，而不是在typescript中。

我在我的另一个视图文件中使用这个组件作为指令。

<editor [body]="page.body" eid="body" ename="body"></editor>

组件中的template块使用动态值设置正确。只有javascript部分是我的问题。

还有别的办法让我错过吗?

注:到目前为止，它运行得很好。我只是想让初始化完全动态，这样我就可以在任何地方使用不同的id。

您可以尝试使用箭头函数来代替函数以保持相同的上下文

  $(document).on("pageLoaded", () => {
            console.log("pageLoaded");
                $(this.eid).summernote({
                    height: '200px',
                    callbacks: {
                        onChange: (contents, $editable) => {
                            $(this.eid).val(contents);
                        }
                    }
                });
        });
    }
相关文章：