Teams Tookit Blazor语言 - 无法跨多个选项卡使用调整大小事件

Question

我目前正在尝试重新注册我在切换选项卡时使用的事件。

JS是:

window.resizeListener = function (dotnethelper) {
$(window).resize(() => {
let browserWidth = $(window).innerWidth();
let browserHeight = $(window).innerHeight();
dotnethelper.invokeMethodAsync('SetBrowserDimensions', browserWidth, browserHeight).then(() => {
// success, do nothing
}).catch(error => {
console.log("Error during browser resize: " + error);
});
});
}
window.getWindowDimensions = function () {
return {
width: window.innerWidth,
height: window.innerHeight
};
};`

我创建了以下类:

using Microsoft.JSInterop;
namespace DevBlazor.Data
{
public class BrowserService
{
private IJSRuntime JS = null;
public event EventHandler<GetDimensions> Resize;
public async void Init(IJSRuntime js)
{
// enforce single invocation            
if (JS == null)
{
this.JS = js;
_ = await JS.InvokeAsync<string>("resizeListener", DotNetObjectReference.Create(this));
}
}
[JSInvokable]
public void SetBrowserDimensions(int jsBrowserWidth, int jsBrowserHeight)
{
// For simplicity, we're just using the new width
this.Resize?.Invoke(this, new GetDimensions() { Width = jsBrowserWidth, Height = jsBrowserHeight });
}
}
public class GetDimensions
{
public int Width { get; set; }
public int Height { get; set; }
}
}

作为单例添加到program.cs:builder.Services.AddSingleton<BrowserService>();

然后在每个选项卡中使用:

private static Boolean bigWindowSize = true;
protected void UpdatedBrowserWidth(object sender, GetDimensions getDimensions)
{
wd = getDimensions;
Console.WriteLine("Width: " + wd.Width + Environment.NewLine + "Height: " + wd.Height);
if (wd.Width >= wd.Height)
{
bigWindowSize = true;
base.StateHasChanged();
}
else
{
bigWindowSize = false;
base.StateHasChanged();
}
}
async Task CreateSizeDimensions()
{
//just used to create an initial non-null starting value
wd = await JsRuntime.InvokeAsync<GetDimensions>("getWindowDimensions");
Console.WriteLine("Init Width: " + wd.Width + Environment.NewLine + "Init Height: " + wd.Height);
if (wd.Width >= wd.Height)
bigWindowSize = true;
else
bigWindowSize = false;
Browser.Init(JsRuntime);
Browser.Resize += UpdatedBrowserWidth;
}

标准Init:

protected override async Task OnAfterRenderAsync(bool firstRender)
{
await base.OnAfterRenderAsync(firstRender);
if (firstRender)
{
isInTeams = await MicrosoftTeams.IsInTeams();
if (isInTeams)
{
await CreateSizeDimensions();
}
StateHasChanged();
}
}

I have try:

1. 添加一个idisable
2. 无法找到一种方法，使其注册更全局通过TabConfig。
3. 在Welcome中将主要变量设置为静态。
4. 使所有的主要变量连接到这个在每个选项卡私有静态，因为我不能做一个全局页面调用。

我只是想让Resize事件更像一个全局注册与Teams Tookit Tab应用程序。

Answer 1

有多重问题。

1. JS == null导致它运行1次，所以它永远不会再调用。
2. 在删除所有静态并使用IDisposable取消注册事件后，应该没有内存泄漏。

问题现在已经解决，并且在每个选项卡上加载/卸载。