Ionic 如何在离子/Angular 分量中使用Vega-embed?

jxct1oxe  于 2023-02-27  发布在  Ionic
关注(0)|答案(2)|浏览(142)

我很确定是我的错,但我找不到。
我用ionic start oracolo创建了一个新的Ionic/Angular应用程序,然后添加了一个新组件(名为Histogram,但这并不重要),然后安装了vega-embed with npm install vega-embed,并尝试使用以下代码向组件添加Vega/Vega-Lite视图:

async ngOnInit() {
    const spec = "https://raw.githubusercontent.com/vega/vega/master/docs/examples/bar-chart.vg.json";
    const result = await embed("figure#vis", spec);
    console.log(result.view);
  }

与其HTML模板配对:

<div>
  <figure id="vis"></figure>
</div>

我想我在这里所做的只是按照vega-embed project page上的示例代码,但是当我运行我的应用程序时,没有Vega视图出现,我在浏览器控制台中得到以下错误:

Uncaught (in promise): Error: figure#vis does not exist
Error: figure#vis does not exist
    at _callee4$ (vega-embed.module.js:2960:17)
    at tryCatch (vega-embed.module.js:123:15)
    at Generator.invoke [as _invoke] (vega-embed.module.js:319:20)
    at prototype.<computed> [as next] (vega-embed.module.js:172:19)
    at asyncGeneratorStep (vega-embed.module.js:54:24)
    at _next (vega-embed.module.js:73:9)
    at vega-embed.module.js:78:7
    at new ZoneAwarePromise (zone.js:1429:21)
    at vega-embed.module.js:70:12
    at _embed3 (vega-embed.module.js:3227:18)
    at resolvePromise (zone.js:1211:31)
    at zone.js:1118:17
    at zone.js:1134:33
    at rejected (tslib.es6.js:119:89)
    at _ZoneDelegate.invoke (zone.js:372:26)
    at Object.onInvoke (core.mjs:24313:33)
    at _ZoneDelegate.invoke (zone.js:371:52)
    at Zone.run (zone.js:134:43)
    at zone.js:1275:36
    at _ZoneDelegate.invokeTask (zone.js:406:31)

我不确定这个应用程序作为一个爱奥尼亚应用程序是否能从嵌入式的Angular 带来任何不同,所以我把它原样带给你。
E.Magginianswer之后编辑:
我试着将代码移到ngAfterViewInit中,在那里DOM应该是可用的,但是我得到了同样的错误:

export class HistogramComponent implements OnInit, AfterViewInit {

  constructor() { }

  ngOnInit() { }

  async ngAfterViewInit() {
    const spec = "https://raw.githubusercontent.com/vega/vega/master/docs/examples/bar-chart.vg.json";
    const result = await embed("figure#vis", spec);
    console.log(result.view);
  }
}

编辑2:
将Vega视图添加到由ionic start命令自动生成的现有ExploreContainerComponent中有效。将视图添加到我之后生成的HistogramComponent中无效。
但是,除了名称之外,我看不到这两个组件之间有任何区别。

qoefvg9y

qoefvg9y1#

This is a lifecycle issue. OnInit DOM不可用。
使用视图初始化后。

643ylb08

643ylb082#

最后,这个问题与vega-embed完全无关,而是由我将自定义组件包含到选项卡中的方式错误引起的,并且在我的问题中没有显示以下代码:
tab3.page.html,在我发现错误之前:

<app-explore-container name="Tab 3 page">
  <histogram></histogram>
</app-explore-container>

tab3.page.html,修复后:

<app-explore-container name="Tab 3 page">
</app-explore-container>

<histogram></histogram>

这里的问题是app-explore-container是一个自定义组件,不支持投影内容(它的模板中缺少ng-content),因此在外部模板(tab3.page.html)中嵌套任何内容都不起作用。
到目前为止,我创建的任何定制组件也是如此,但出于某种奇怪的原因,我本能地将histogram嵌套到app-explore-container中,认为它的行为与任何其他HTML标记一样是理所当然的。
参考E.Maggini的回答,我甚至尝试将代码移回ngOnInit,它确实工作了,因此,虽然这实际上是建议的生命周期问题,因为投影内容问题就是这样,虽然DOM在OnInit阶段可能是真的不可用,但我想这没有任何区别,因为embed函数的异步特性,其不在ngOnInit期间执行其代码,而是尽可能快地执行。

相关问题