Как использовать vega-embed в компоненте Ionic/Angular?

Question

Я почти уверен, что это моя вина, но я не могу ее заметить.

Я создал новое приложение Ionic/Angular сionic start oracoloа затем я добавил к нему новый компонент (названный гистограммой, хотя это не имеет большого значения). Затем я установил vega-embed с помощью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 , однако, когда я запускаю свое приложение, представление 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)

Я не уверен, что приложение, являющееся приложением Ionic, может иметь какое-либо значение с точки зрения встраивания в vega, поэтому я представил его вам как есть. Что я делаю не так?

после ответа user796446 : EDITED

Я попытался переместить код в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 к ранее существовавшему компоненту ExploreContainerComponent, который был автоматически сгенерированionic startкоманда РАБОТАЕТ. Добавление представления к HistogramComponent, который я сгенерировал впоследствии, НЕ работает.

Однако я не вижу никаких различий между двумя компонентами, кроме их названия.

Answer 1

В конце концов, проблема была совершенно не связана сvega-embed, но это было вызвано ошибкой в ​​том, как я включил свой пользовательский компонент на вкладку, и этот код не был показан в моем вопросе:

, прежде чем я нашел ошибку:

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

, после исправления:

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

<histogram></histogram>

Проблема здесь в том, что это пользовательский компонент, который не поддерживает проецируемый контент (ему не хватаетng-contentв своем шаблоне), поэтому вложение чего-либо в него во внешнем шаблоне (tab3.page.html) не будет работать.

То же самое касается любого пользовательского компонента, который я создал до сих пор в своей жизни, но по какой-то странной причине я инстинктивно вложил свойhistogramвapp-explore-containerпринимая как должное, он вел бы себя так же, как и любой другой HTML-тег.

Что касается ответа Э.Маггини, я даже попытался переместить код обратно, и он действительно работает, поэтому, хотя на самом деле это была проблема жизненного цикла, как предполагалось, потому что проблемы с проецируемым контентом таковы, и хотя это, вероятно, правда, что DOM не доступны во времяOnInitфазы, я думаю, это не имеет никакого значения из-за асинхронной природыembedфункция, которая не выполняет свой код во времяngOnInit, но как только это возможно.