将参数传递给 Blazor 中的匿名 javascript 函数

Question

我正在构建一个需要使用 TradingView 高级图表小部件的应用程序，但我希望能够将参数传递到选项中。这就是网站上的代码的样子。

<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container" style="height:100%;width:100%">
  <div class="tradingview-widget-container__widget" style="height:calc(100% - 32px);width:100%"></div>
  <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/" rel="noopener nofollow" target="_blank"><span class="blue-text">Track all markets on TradingView</span></a></div>
  <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js" async>
  {
  "autosize": true,
  "symbol": "COINBASE:BTCUSD",
  "interval": "D",
  "timezone": "Etc/UTC",
  "theme": "light",
  "style": "1",
  "locale": "en",
  "enable_publishing": false,
  "gridColor": "rgba(255, 255, 255, 0.06)",
  "allow_symbol_change": true,
  "calendar": false,
  "studies": [
    "STD;MACD"
  ],
  "support_host": "https://www.tradingview.com"
}
  </script>
</div>
<!-- TradingView Widget END -->

我希望能够传递符号的参数：例如，我希望它不是“COINBASE:BTCUSD”，而是“COINBASE:+”@symbol+””，这样它就可以扩展，并且由于某种原因它会破坏代码每次，是的，我确实注意到了“”引号，它只是没有传递我的 Blazor 变量。我在这里能做什么？以下是小部件的链接，以防有帮助：https://www.tradingview.com/widget-docs/widgets/charts/advanced-chart/ 任何可以使这些图表在整个应用程序中可扩展的解决方案都是太棒了

Answer 1

如果有人在 blazor 中遇到这个问题，我会这样解决：(function() 图表.js

{
    const charting = {
        show: function(symbol, locale, timezone, interval, showDetails, indicators) {
            new TradingView.widget({
                "autosize": true,
                "symbol": symbol,
                "interval": interval,
                "timezone": timezone,
                "theme": "light",
                "style": "8",
                "locale": locale,
                "gridColor": "rgba(255, 255, 255, 0.06)",
                "toolbar_bg": "#f1f3f6",
                "enable_publishing": false,
                "hide_top_toolbar": false,
                "allow_symbol_change": true,
                "save_image": false,
                "details": showDetails,
                "container_id": "tradingview_515f8",
                "studies": indicators,
                "studies": [
                    "STD;MACD",
                    "QuantNomad;UT Bot Alerts"
                ],
            });
        }
    };

    if (typeof window !== 'undefined') {
        window.charting = charting; // Make charting available globally if desired (optional)
    } else {
        // Provide module exports for bundlers or other environments (optional)
        module.exports = charting;
    }
})();

window.scriptLoader = function(sourceUrl, targetElement, innerHtml) {
    if (sourceUrl.Length == 0) {
        console.error("Invalid source URL");
        return;
    }

    var tag = document.createElement('script');
    tag.src = sourceUrl;
    tag.type = "text/javascript";

    tag.onload = function () {
        console.log("Script loaded successfully");
    }

    tag.onerror = function () {
        console.error("Failed to load script");
    }
    tag.innerHTML = innerHtml
    const target = document.querySelector(targetElement);
    target.appendChild(tag);
};

window.pageLoader = function (sourceUrl) {
    window.location.href = sourceUrl;
}

ChartService.cs

using System.ComponentModel;
using System.Text.Json;
using Microsoft.JSInterop;

namespace BotTrading.Services;

public class ChartService : IDisposable
{
    readonly IJSRuntime js;
    public readonly ChartConfig config;

    public readonly IEnumerable<string> symbolTypes = new[] { "all", "stock", "futures", "forex", "crypto", "index", "bond", "economic" };

    public readonly IEnumerable<string> Indicators = new[] {
        "STD;MACD",
        "UT Bot Alerts-QuantNomad",
    };

    public IEnumerable<(string, string)> Intervals = new[]
    {
        ("1", "1m"),
        ("3", "3m"),
        ("5", "5m"),
        ("15", "15m"),
        ("30", "30m"),
        ("60", "1h"),
        ("120", "2h"),
        ("180", "3h"),
        ("240", "4h"),
        ("D", "1d"),
        ("W", "1w"),
    };

    public ChartService(IJSRuntime js, ChartConfig config)
    {
        this.js = js;
        this.config = config;
        config.PropertyChanged += DrawChartSync;
    }

    private void DrawChartSync(object? sender, PropertyChangedEventArgs e)
    {
        DrawChart();
    }

    public async Task DrawChart() => 
        await js.InvokeVoidAsync("charting.show", config.Symbol.Id, config.Locale, config.TimeZone, config.Interval, config.ShowDetails, config.Indicators);
    
    public async Task DisplayChart(string symbol) => 
        await js.InvokeVoidAsync("charting.show", symbol, config.Locale, config.TimeZone, config.Interval, config.ShowDetails, config.Indicators);

    public async Task Navigate(Uri uri) => 
        await js.InvokeVoidAsync("pageLoader", uri);

    const string technicalAnalysisJsUrl = "https://s3.tradingview.com/external-embedding/embed-widget-technical-analysis.js";
    
    public async Task LoadTechnicalAnalysis(string containerElement) =>
        await js.InvokeVoidAsync("scriptLoader", technicalAnalysisJsUrl, containerElement, JsonSerializer.Serialize(new
        {
            interval = "1m",
            width = "100%",
            height = "100%",
            isTransparent = false,
            symbol = config.Symbol.Symbol,
            showIntervalTabs = false,
            locale = config.Locale,
            colorTheme = "dark",
        }));

    // public async Task<IEnumerable<string>> SearchTimeZones(string searchText) =>
    //     TimeZoneConverter.TZConvert
    //         .KnownIanaTimeZoneNames
    //         .Where(tz => tz.ToLower().Contains(searchText.ToLower()))
    //         .OrderBy(tz => tz);

    public void Dispose() =>
        config.PropertyChanged -= DrawChartSync;
}

ChartConfig.cs

using System.ComponentModel;
using DevExpress.Mvvm.CodeGenerators;

namespace BotTrading.Services;

[GenerateViewModel]
public partial class ChartConfig : INotifyPropertyChanged
{
    [GenerateProperty] ExchangeSymbol symbol = new ExchangeSymbol {Symbol = "XBTUSD"};
    [GenerateProperty] string locale = "en";
    [GenerateProperty] string timeZone = "Etc/UTC";
    [GenerateProperty] string interval = "240";
    [GenerateProperty] bool showDetails = false;
    [GenerateProperty] string[] indicators = Array.Empty<string>();

    public event EventHandler OnChartChanged =
        (sender, args) => { };

    public void Updated() =>
        OnChartChanged.Invoke(this, new EventArgs());

    public event PropertyChangedEventHandler? PropertyChanged;
}


public record ExchangeSymbol
{
    public string Id => $"{Exchange}:{Symbol}";
    public string Symbol { get; init; }
    public string Description { get; init; }
    public string Type { get; init; }
    public string Exchange { get; init; }
    public string Provider_id { get; init; }
}