Код: Выделить всё
namespace JSInteropWithTypeScript {
export class Generator {
public showAlert(): void {
alert("INTEROP");
}
}
export function Load(): void {
window['generator'] = new Generator();
}
}
JSInteropWithTypeScript.Load();
< /code>
И здесь генерируется js: < /p>
var JSInteropWithTypeScript;
(function (JSInteropWithTypeScript) {
var Generator = /** @class */ (function () {
function Generator() {
}
Generator.prototype.showAlert = function () {
alert("INTEROP");
};
return Generator;
}());
JSInteropWithTypeScript.Generator = Generator;
function Load() {
window['generator'] = new Generator();
}
JSInteropWithTypeScript.Load = Load;
})(JSInteropWithTypeScript || (JSInteropWithTypeScript = {}));
JSInteropWithTypeScript.Load();
//# sourceMappingURL=generator.js.map
< /code>
Далее я хочу вызвать сценарий JS, чтобы у меня был простой компонент с кнопкой: < /p>
@namespace Components.Reports.Components.Generator
@inherits ControlsBase
BUTON
< /code>
В базовом классе для этого компонента я хочу загрузить ленивую загрузку (поэтому мне не нужно добавлять каждый скрипт в _host, просто используйте их, когда они необходимы) этот файл скрипта и вызову эту функцию, поэтому я сделал это соблюдение: < /p>
public class ControlsBase : ComponentBase, IAsyncDisposable
{
private readonly Lazy moduleTask;
[Inject]
protected IJSRuntime JsRuntime { get; set; }
public ControlsBase()
{
Task jsInvokes() => this.JsRuntime.InvokeAsync("import", "./_content/Components/js/generator.js").AsTask();
this. moduleTask = new Lazy(jsInvokes);
}
public async Task ShowAlert()
{
try
{
var module = await moduleTask.Value;
await module.InvokeVoidAsync("showAlert");
}
catch (JSException jsException)
{
logger.Error($"Problem with js interop {jsException}");
}
}
public async ValueTask DisposeAsync()
{
if (moduleTask.IsValueCreated)
{
var module = await moduleTask.Value;
await module.DisposeAsync();
}
}
}
< /code>
Итак, теперь я хочу назвать это, моя проблема /вопрос заключается в том, когда я называю скомпилированным сценарием JS, я получаю < /p>
Не удалось найти «ShowAlert» ('ShowAlert' был не определен).export function showAlert() {
alert("INTEROP");
}
Так что я делаю неправильно с TypeScript?namespace JSInteropWithTypeScript {
export class Generator {
public ShowAlert(): void {
alert("INTEROP");
}
}
}
function showAlert(): void {
let generator = new JSInteropWithTypeScript.Generator();
generator.ShowAlert();
}
< /code>
и он компилируется в JS: < /p>
var JSInteropWithTypeScript;
(function (JSInteropWithTypeScript) {
var Generator = /** @class */ (function () {
function Generator() {
}
Generator.prototype.ShowAlert = function () {
alert("INTEROP");
};
return Generator;
}());
JSInteropWithTypeScript.Generator = Generator;
})(JSInteropWithTypeScript || (JSInteropWithTypeScript = {}));
function showAlert() {
var generator = new JSInteropWithTypeScript.Generator();
generator.ShowAlert();
}
< /code>
Но для правильной работы мне нужно вручную добавить экспорт перед функцией в JS. Я знаю, что причина этой ошибки заключается в том, что TypeScript, по умолчанию, создает код JavaScript, который предназначен для использования через различных менеджеров пакетов, которые обслуживают экспорт и модули. Такими инструментами являются Usully node.js или Webpack. Я могу выключить его, используя TSConfig: < /p>
{
"compilerOptions": {
"module": "none"
}
}
< /code>
Но все же JS Interop работает только тогда, когда функция помечена как экспорт в JS. Есть идеи, как справиться с этим?
< /code>
и используемый код: < /p>
public async Task OnClick()
{
try
{
await this.JsRuntime.InvokeVoidAsync("showAlert");
}
catch (JSException jsException)
{
logger.Error($"Problem with js interop {jsException}");
}
}
< /code>
В моей базе компонентов, и она жива, но все же только для любопытства я хочу сделать эту ленивую нагрузку. Любые предложения будут оценены.
Подробнее здесь: https://stackoverflow.com/questions/649 ... treference
