如何将 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();
        });
    }};

这是我的数组，它在问题收集器组件上填充了不同项目和按钮的卡片。

数据库数据.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>    

Answer 1

使showCollectorDialog函数全局化index.html

<script type="text/javascript" src="<jira-issue-collector-URL>"></script>
<script>
  window.ATL_JQ_PAGE_PROPS = {
    triggerFunction: function(showCollectorDialog) {
      window.showCollectorDialog = showCollectorDialog
    }
  };
</script>

然后在以下位置调用它some.component.ts：

<script type="text/javascript" src="<jira-issue-collector-URL>"></script>
<script>
  window.ATL_JQ_PAGE_PROPS = {
    triggerFunction: function(showCollectorDialog) {
      window.showCollectorDialog = showCollectorDialog
    }
  };
</script>