ElementRef 속성을 Blazor에서 자바 스크립트 interop 반환 값으로 설정할 수 있습니까?

asp.net-core blazor c#

문제

textarea 요소에서 CodeMirror를 사용하고 있습니다. 나는 이것을 달성하기 위해 자바 스크립트 interop을 사용하고 있으며 코드 미러를 적용 할 때 잘 동작한다. 그러나 내 의도는 그 codemirror 요소를 반환하고 다른 elementref에 저장하는 것입니다.

Blazor.registerFunction('BlazorExt.CodeMirrorSetupExt', (element) =>
{
    return CodeMirror.fromTextArea(element,
    {
        mode: 'application/ld+json',
        matchBrackets: true,
        autoCloseBrackets: true,
        indentWithTabs: true,
        lineNumbers: true,
        autofocus: true,
        styleActiveLine: true,
        readOnly: false,
        autoCloseBrackets: true,
        foldGutter: true,
        height: 'auto',
        width: 'auto',
        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter']
    });
});

        public static ElementRef CodeMirrorSetupExt(this ElementRef elementRef)
    {
        var result = RegisteredFunction.Invoke<ElementRef>("BlazorExt.CodeMirrorSetupExt", elementRef);
        return result;
    }

내 구성 요소 :

Blazor.registerFunction('BlazorExt.CodeMirrorSetupExt', (element) =>
{
    return CodeMirror.fromTextArea(element,
    {
        mode: 'application/ld+json',
        matchBrackets: true,
        autoCloseBrackets: true,
        indentWithTabs: true,
        lineNumbers: true,
        autofocus: true,
        styleActiveLine: true,
        readOnly: false,
        autoCloseBrackets: true,
        foldGutter: true,
        height: 'auto',
        width: 'auto',
        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter']
    });
});

        public static ElementRef CodeMirrorSetupExt(this ElementRef elementRef)
    {
        var result = RegisteredFunction.Invoke<ElementRef>("BlazorExt.CodeMirrorSetupExt", elementRef);
        return result;
    }

이상적으로이 시점 이후에 필자는 자신의 기능을 사용하여 내 codemirror ref를 업데이트 할 수 있어야합니다.

Blazor.registerFunction('BlazorExt.CodeMirrorSetupExt', (element) =>
{
    return CodeMirror.fromTextArea(element,
    {
        mode: 'application/ld+json',
        matchBrackets: true,
        autoCloseBrackets: true,
        indentWithTabs: true,
        lineNumbers: true,
        autofocus: true,
        styleActiveLine: true,
        readOnly: false,
        autoCloseBrackets: true,
        foldGutter: true,
        height: 'auto',
        width: 'auto',
        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter']
    });
});

        public static ElementRef CodeMirrorSetupExt(this ElementRef elementRef)
    {
        var result = RegisteredFunction.Invoke<ElementRef>("BlazorExt.CodeMirrorSetupExt", elementRef);
        return result;
    }

구성 요소에서 다시 codemirror를 업데이트 할 수 있어야합니다.

Blazor.registerFunction('BlazorExt.CodeMirrorSetupExt', (element) =>
{
    return CodeMirror.fromTextArea(element,
    {
        mode: 'application/ld+json',
        matchBrackets: true,
        autoCloseBrackets: true,
        indentWithTabs: true,
        lineNumbers: true,
        autofocus: true,
        styleActiveLine: true,
        readOnly: false,
        autoCloseBrackets: true,
        foldGutter: true,
        height: 'auto',
        width: 'auto',
        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter']
    });
});

        public static ElementRef CodeMirrorSetupExt(this ElementRef elementRef)
    {
        var result = RegisteredFunction.Invoke<ElementRef>("BlazorExt.CodeMirrorSetupExt", elementRef);
        return result;
    }

그러나 예외가 발생합니다 : Microsoft.AspNetCore.Blazor.Browser.Interop.JavaScriptException : 속성 'getDoc'null 읽을 수 없습니다.

가능한 무엇이 외부에서 달성하려고하는 중이거나 codemirror javascript 객체를 elementref에 전달할 수 없습니까?

수락 된 답변

아닙니다. 아직 가능하지 않습니다. 여기를 보아라

당신이 할 수있는 일은, 당신의 자바 스크립트 객체를 세계적으로 등록하고, 그 참조를 결국 두 번째 용도로 사용하는 것입니다. 이렇게 :

Blazor.registerFunction('BlazorExt.CodeMirrorSetupExt', (element) =>
{
  window.mybject = CodeMirror.fromTextArea(element,
  {
     mode: 'application/ld+json',
     matchBrackets: true,
     autoCloseBrackets: true,
     indentWithTabs: true,
     lineNumbers: true,
     autofocus: true,
     styleActiveLine: true,
     readOnly: false,
     autoCloseBrackets: true,
     foldGutter: true,
     height: 'auto',
     width: 'auto',
     gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter']
   });
   return true;
 });

public static void CodeMirrorSetupExt(this ElementRef elementRef)
{
    RegisteredFunction.Invoke<bool>("BlazorExt.CodeMirrorSetupExt", elementRef);
}

그리고:

Blazor.registerFunction('BlazorExt.CodeMirrorSetupExt', (element) =>
{
  window.mybject = CodeMirror.fromTextArea(element,
  {
     mode: 'application/ld+json',
     matchBrackets: true,
     autoCloseBrackets: true,
     indentWithTabs: true,
     lineNumbers: true,
     autofocus: true,
     styleActiveLine: true,
     readOnly: false,
     autoCloseBrackets: true,
     foldGutter: true,
     height: 'auto',
     width: 'auto',
     gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter']
   });
   return true;
 });

public static void CodeMirrorSetupExt(this ElementRef elementRef)
{
    RegisteredFunction.Invoke<bool>("BlazorExt.CodeMirrorSetupExt", elementRef);
}

물론 배열과 키를 참조로 더 멋지게 만들 수 있습니다.




아래 라이선스: CC-BY-SA with attribution
와 제휴하지 않음 Stack Overflow
이 KB는 합법적입니까? 예, 이유를 알아보십시오.
아래 라이선스: CC-BY-SA with attribution
와 제휴하지 않음 Stack Overflow
이 KB는 합법적입니까? 예, 이유를 알아보십시오.