1. 介绍
ngx-qlik-isolated 是一个 Angular 插件，它使用 Qlik Sense 的 Isolated 插件 API 来显示可视化效果。它提供了一个快速的方法来构建大规模的和易于管理的 Qlik Sense 应用，并集成 Qlik Sense 应用中的可视化组件，而不用担心与其他非 Qlik Sense 应用有冲突。
本文将详细介绍如何使用 ngx-qlik-isolated 来构建一个简单的 Qlik Sense 应用程序，并集成可视化组件。我们将涵盖以下内容：
- 安装和引入
ngx-qlik-isolated - 配置 Qlik Sense 的服务 URL 和访问令牌
- 创建一个基于
ngx-qlik-isolated的组件 - 在组件中添加 Qlik Sense 中的可视化效果
- 使用 Qlik Sense APIs 来操作 Qlik Sense 中的数据和过滤器
2. 安装和引入 ngx-qlik-isolated
首先，我们需要安装 ngx-qlik-isolated 插件。使用以下命令进行安装：
npm install ngx-qlik-isolated --save
接下来，在 app.module.ts 中引入 NgxQlikIsolatedModule ：
-- -------------------- ---- -------
------ - --------------------- - ---- --------------------
-----------
-------- -
---------------------
--
---
--
------ ----- --------- - -接下来我们需要在应用程序启动时配置 Qlik Sense 服务的 URL 和访问令牌。
3. 配置 Qlik Sense 的服务 URL 和访问令牌
我们可以在应用程序启动时配置 Qlik Sense 服务的 URL 和访问令牌，该配置将用于所有 Qlik Sense API 调用。
我们可以将这些设置存储在一个配置服务的单例中，以便在应用的任何地方轻松地访问这些设置。
首先，我们创建一个 ConfigService ：
import { Injectable } from '@angular/core';
@Injectable()
export class ConfigService {
qlikServiceUrl = '';
qlikAccessToken = '';
}然后我们在 app.module.ts 中创建 ConfigService 的实例，并使用 Qlik Sense 服务的 URL 和访问令牌进行配置：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ---------------------- ----------- - ---- --------------------
------ - ------------- - ---- -------------------
-----------
-------- -
--------------
---------------------
--
---------- -
--------------
- -------- ------------ ----------- -- -- --
----- ------------------------------
------- -----
----- -----
------- ---
------ ---
---- ----------------------------------
---
--
---
--
------ ----- --------- - -在上面的代码中，我们通过将 QLIK_CONFIG 提供的工厂函数用作 Token，配置了 Qlik 的服务 URL 和访问令牌。
4. 创建一个基于 ngx-qlik-isolated 的组件
我们将在组件中使用 ngx-qlik-isolated 来显示 Qlik Sense 中的视图。创建一个名为 QlikViewComponent 的新组件：
-- -------------------- ---- ------- ------ - ---------- ------ - ---- ---------------- ------------ --------- ---------------- ------------ ----------------------------- ---------- ----------------------------- -- ------ ----- ----------------- ---------- ------ - ------------- - - ---------- - - -
现在我们将在 HTML 文件中添加一个 div，该代码将显示我们的 Qlik Sense 报表，以及一些按钮，这些按钮将用于交互式应用程序中的过滤器。
<div class="qlik-container"> <div id="qlikView"></div> <button type="button" class="btn btn-primary">选择销售人员</button> <button type="button" class="btn btn-primary">选择州</button> </div>
5. 在组件中添加 Qlik Sense 中的可视化效果
我们使用 Qlik Sense 的 Isolated 插件功能来显示 Qlik Sense 中的可视化效果。在组件中，我们使用 Qlik 对象来访问 Qlik Sense API。
我们将使用以下代码来初始化视图：
-- -------------------- ---- -------
------ - ---------- ----------- ---------- ------- --------- - ---- ----------------
------ - ------------- - ---- --------------------
------- ----- ----- ----
------------
--------- ----------------
------------ -----------------------------
---------- -----------------------------
--
------ ----- ----------------- ---------- ------- --------- -
---------------------- ------------ -----------
------- -----
------- ------ -------
------- ---
------------------- ------- -------------- -
--------- - --- ----------------------------
---------- - -------------
-
---------- -
------------------------------------- -- -
------- - ---
---------------------------------------------------
----------------------
---------------------- -- -- -
----------------------
---
---
-
------------- -
------------------
-
-在上面的代码中，我们使用 Qlik 对象实例化了 Qlik Sense 插件，将其传递给我们的 qlik 变量。我们还从 ConfigService 获取了应用程序 ID，并使用 qlik.getQv() 方法初始化视图。
一旦视图初始化后，我们将分别设置元素的名称和类型，并在 render 事件处理函数中隐藏加载状态指示符。
6. 在组件中添加过滤器
添加过滤器需要创建过滤器窗口。我们按以下方式在组件中创建了一个名为 FilterDialogComponent 的新组件：
-- -------------------- ---- -------
------ - ---------- ------ ---------- ------- ------------- - ---- ----------------
------ - ------------------------ - ---- --------------------------------
------ - ------------- - ---- --------------------
------ - ---------------- - ---- ------------------------
------------
--------- --------------------
------------ ---------------------------------
---------- ---------------------------------
--
------ ----- --------------------- ---------- ------- --------- -
-------- ----------- --------------
------- ----------- ------------- ------- ------ ------- ------- ------------- ------- ------ ---------- - ---
------------------- ---------- ----------------- ------- ------- -------------- ------- ----- ------------------------- - -
---------- -
-
-------------------- -------------- -
-- -------- ------------ -- --- ---- --- -- ---- -----
-- ------------- -- -------- -
----- -------- - --------------------------------------- --
--------------------------------------------------------------------
--
---------------------------------- -- -
--- ---- ------ -- -------- -
----- ---- - ----------------------------------------------------- ---------------
----- ----------- - ------------------------- ------------------
--------------------- -- -
----- -------- - --------------------------------------------- -- --------------
---------------------------- ---------------- ------ ----- ------- ---------------- -- ------- ------- ---- ------ ----------
---
-
---
-
-
---
- ----- -- ---------- ----- --------- --- -- -----
- --- ------- - ------- ---- ---- ------- -- --- ------ -- --- ---------- ----------
--
------- -------------------- ------- ------ ------- -
------ --------------------------------- -- -
------ ------------------------------ -- -
------ -------------------------
------ -
------ ------------
--
-------------------- -
----- -----
----------- -------
------------- --
--------------- --
------------ ------------------ - ---- - ------
----------- -------
----------------- --
----------------- -
--
-
-------------- -- -
------ ------------------------------ -- -
------ -------------------------------------------------- -- --------
---
---
---
---
-
-在上面的代码中，我们创建了一个 FilterDialogComponent，它获取所有列的值并为它们创建下拉列表，并返回当前选定的值。
我们在组件的 HTML 文件中实现了 UI：
-- -------------------- ---- -------
---- --------------------------------
------- ------------- ---------- ------------ ------------------- ------------------------------------------
---- ----- ---
---- ------------ ----- ----------------- ------------- ------------- ----------------------------------- -------------------
---- ------------------- --------- ----------------
---- ----------------------
---- ---------------------
--- ------------------- -------------------------------
------- ------------- ------------- -------------------- -------------------
----- ---------------------------------
---------
------
---- -------------------
---- ----------- --- -- ------------
---- -------------------
------ -----------------------------------------
------- -------------------- ------------------ ----------------------------------------
------- ----------- --- -- ----------- ------------------------------------------
---------
------
------
------
---- ---------------------
------- ------------- ---------- -------------- --------------------------------
------- ------------- ---------- ------------ -------------------- -------------------------------------
------
------
------
------
------这段 HTML 代码包含一个模态对话框，用于设置所选的过滤器值。 该代码还在 Angular 中使用了 ngModel 变量，该变量存储用户选择的值，并将其传递给 updateFilters() 函数。
接下来，我们将在主组件中实现 updateFilters() 函数，该函数将更新 Qlik Sense 中的数据，以显示用户选择的过滤器值。
-- -------------------- ---- -------
------ - ---------- ----------- ---------- ------- --------- - ---- ----------------
------ - ------------------------ - ---- --------------------------------
------ - ------------- - ---- --------------------
------ - ---------------- - ---- ------------------------
------ - --------------------- - ---- -------------------------------------------
------- ----- ----- ----
------------
--------- ----------------
------------ -----------------------------
---------- -----------------------------
--
------ ----- ----------------- ---------- ------- --------- -
---------------------- ------------ -----------
--------------------------------- ------------- ----------------------
------- -----
------- ------ -------
------- ---
------- -------------- - ---
------------------- ------- -------------- ------- ---------- ----------------- ------- ----- ------------------------- -
--------- - --- ----------------------------
---------- - -------------
-
---------- -
------------------------------------- -- -
------- - ---
---------------------------------------------------
----------------------
---------------------- -- -- -
----------------------
---
---
-
------------- -
------------------
-
--------------- -
----- ---------- - ---
--- ---- --- -- -------------------- -
-- ----------------------------------------- -
-----------------
------ -----------------------------------------------
------ -------------------------------------------------------------------
---
-
-
----- ------------ - -------------------
---------------------------------------- -- -
----- ----- - -----------
----- ---------- - ------------------------------------------ -- ------------------------------------------ - - - - - ---------------
----- ------ - ------------------ -- --------- - - - - - ----------------------------------------
----- --------- - ----------------- ------------------- - ------ ---
------------------------------ --- --- - ----------------------------------------
---------------------------
---
-
-在上面的代码中，我们用选定的值更新了我们的 selectedValues 对象，然后我们将这些值传递给 Qlik 的 QlikSense API。我们也可以进行其他一些操作，如收集当前数据集的状态并在 URL 中添加筛选器。
7. 总结
在本文中，我们介绍了如何在 Angular 应用程序中使用 ngx-qlik-isolated 插件来显示 Qlik Sense 中的数据，并添加过滤器。我们启动应用程序时通过 ConfigService 表示插件向 Qlik Sense 的 URL 和访问令牌进行身份验证，并使用 QLIK_CONFIG 来指定 Qlik Sense 服务的 URL 和访问令牌。我们创建了一个 QlikViewComponent 组件，该组件中展示应用程序的 Qlik Sense 视图。我们创建了 FilterDialogComponent 组件，用户可以在其中为应用程序提供过滤器。最后，我们在主组件中实现了 updateFilters() 函数，该函数将更新 Qlik Sense 中的数据。
通过实现本文所述的步骤，您将能够获得一个完全功能的 Angular 应用程序，该应用程序显示 Qlik Sense 中的数据并使用过滤器进行交互。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005673181e8991b448e3b3b