jquery 如何将Jira问题收集器与Angular应用程序集成?

xriantvc  于 2022-12-18  发布在  jQuery
关注(0)|答案(2)|浏览(204)

我希望创建一个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卡组件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();
          });
        }};
       }
   }

吉拉卡组件. 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>
af7jpaap

af7jpaap1#

使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中调用它:

submitIssue() {
  (window as any).showCollectorDialog()
}
6kkfgxo0

6kkfgxo02#

Do this-

your button in the html file-
  <a class="nav-link waves-light" mdbWavesEffect (click)="openFeedbackModal()">

ts file-
openFeedbackModal(){
    $.ajax({
      url: your url,
      type: "get",
      cache: true,
      dataType: "script"
  });
  
   window.ATL_JQ_PAGE_PROPS =  {
      "triggerFunction": function(showCollectorDialog) {
            showCollectorDialog();
      }};

}

and thats it

相关问题