Question

我正在尝试将aws快速瞄准仪表板嵌入到有角度的应用程序中。

我正在遵循以下URL在Angular上实施 https://github.com/awslabs/amazon-quicksight-embedding-sdk

请提供有关如何在Angular中实现以下逻辑的示例代码来帮助我

 <!DOCTYPE html>
    <html>

    <head>
        <title>Basic Embed</title>
        <script src="https://unpkg.com/amazon-quicksight-embedding-sdk@1.0.3/dist/quicksight-embedding-js-sdk.min.js" />
        <script type="text/javascript">
            var dashboard
            function onDashboardLoad(payload) {
                console.log("Do something when the dashboard is fully loaded.");
            }

            function onError(payload) {
                console.log("Do something when the dashboard fails loading");
            }

            function embedDashboard() {
                var containerDiv = document.getElementById("dashboardContainer");
                var options = {
                    url: "https://us-east-1.quicksight.aws.amazon.com/sn/dashboards/dashboardId?isauthcode=true&identityprovider=quicksight&code=authcode",
                    container: containerDiv,
                    parameters: {
                        country: "United States"
                    },
                    scrolling: "no",
                    height: "700px",
                    width: "1000px"
                };
                dashboard = QuickSightEmbedding.embedDashboard(options);
                dashboard.on("error", onError);
                dashboard.on("load", onDashboardLoad);
            }

            function onCountryChange(obj) {
                dashboard.setParameters({country: obj.value});
            }
        </script>
    </head>

    <body onload="embedDashboard()">
        <span>
            <label for="country">Country</label>
            <select id="country" name="country" onchange="onCountryChange(this)">
                <option value="United States">United States</option>
                <option value="Mexico">Mexico</option>
                <option value="Canada">Canada</option>
            </select>
        </span>
        <div id="dashboardContainer"></div>
    </body>

    </html>

导入embedDashboard模块时出现编译时错误

从“ amazon-quicksight-embedding-sdk / src”导入{embedDashboard}；

./ node_modules / amazon-quicksight-embedding-sdk / src / embedDashboard.js中的错误6:12 模块解析失败：意外的令牌（6:12）您可能需要适当的加载程序来处理此文件类型。 | |从“ ./EmbeddableDashboard”导入EmbeddableDashboard；

从'./lib/types'导入类型{EmbeddingOptions}; |

如何通过角度实现上述逻辑？当我尝试导入QuickSightEmbedding以使用embedDashboard（options）时。我收到了编译时错误。

Answer 1

如果它完全可以使用，则导入语句应如下所示：import QuickSightEmbedding from 'amazon-quicksight-embedding-sdk'。

角度您可能需要适当的加载程序错误

1 个答案: