Способы интеграции сборщика вопросов Jira с приложением Angular?

Question

Я хочу создать приложение Angular 7, в котором для сбора проблем непосредственно в соответствующие проекты используется сборщик проблем Jira.

Когда я создаю приложение таким, какое оно есть сейчас, ничего не происходит. Когда я перемещаю код из метода «submitIssue» в «ngOnInIt», сразу появляется диалог сборщика проблем. Куда следует добавить фрагмент кода?

Любая помощь будет принята с благодарностью. Спасибо!

Пример фрагмента кода Jira

// Requires jQuery!
jQuery.ajax({
    url: "https://<domain>.atlassian.net/s/_/download/batch/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector/com",
    type: "get",
    cache: true,
    dataType: "script"
});

 window.ATL_JQ_PAGE_PROPS =  {
    "triggerFunction": function(showCollectorDialog) {
        //Requires that jQuery is available! 
        jQuery("#myCustomTrigger").click(function(e) {
            e.preventDefault();
            showCollectorDialog();
        });
    }};

Это мой массив, который заполняет карточки различными проектами и кнопками в моем компоненте сборщика проблем.

DB-data.ts

export const PROJECTS: any = [

    {
        id: 1,
        title: 'Project Title',
        /** The url is taken directly from the issue collector section within the Jira project. Link below is modified
         * for security purposes. */
        url: 'https://<domain>.atlassian.net/s/_/download/batch/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector/com'
    },
    {
        id: 2,
        title: 'Project Title',
        /** The url is taken directly from the issue collector section within the Jira project. Link below is modified
         * for security purposes. */
        url: 'https://<domain>.atlassian.net/s/_/download/batch/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector/com'
    },

];


export function findCourseById(projectId:number) {
    return PROJECTS.find(project => project.id === projectId);


}

JIRA-card.component.ts

import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
import { Project } from 'src/app/model/project';
import { PROJECTS } from 'src/db-data';
import { projection } from '@angular/core/src/render3';
import * as $ from 'jquery';

declare global {
  interface Window { ATL_JQ_PAGE_PROPS: any; }
}

window.ATL_JQ_PAGE_PROPS = window.ATL_JQ_PAGE_PROPS || {};

@Component({
  selector: 'app-jira-card',
  templateUrl: './jira-card.component.html',
  styleUrls: ['./jira-card.component.scss']
})

export class JiraCardComponent implements OnInit {

  @Input()
  project: Project;

  constructor() { }

   ngOnInit() {}

   submitIssue() {

            // Requires jQuery!
            jQuery.ajax({
              url: this.project.url,
              type: 'get',
              cache: true,
              dataType: 'script'
            });

        window.ATL_JQ_PAGE_PROPS =  {
        "triggerFunction": function(showCollectorDialog) {
          jQuery("#submit").on('click', function(e) {
            e.preventDefault();
            showCollectorDialog();
          });
        }};
       }
   }

JIRA-card.component.html

<div class="main-div">
  <mat-card class="jira-card">
      <mat-card-header>
        <mat-card-title>{{ project.title }}</mat-card-title>
        <mat-card-subtitle></mat-card-subtitle>
      </mat-card-header>
      <mat-card-actions>
        <button mat-raised-button id (click)="submitIssue()" id="#submit">Submit Issue</button>
      </mat-card-actions>
    </mat-card>
</div>