堆栈内存溢出
  繁体   English   中英

如何将此 javascript 和 HTML 代码添加到 angular 项目中？ 我可以在 ZD18B8624A0F5F721DA7B82365FC56 中从 javascript function 渲染 html

[英]How Do I add this javascript and HTML code into an angular project? and can i render html from javascript function in angular?

 原文  2019-11-01 15:40:57  3   2    javascript/ angular/ angular7/ angular8/ angular-components

问题描述

如何将此 javascript 和 HTML 代码添加到 angular 项目中？ 我已将 func.js 放在我的 angular 项目和我的 app.component.ts 文件中的 src 文件夹中，我尝试导入并使用 ngAfterViewInit() 加载和使用 javascript 函数

这些是 javascript 和 html 文件我试图添加到 angular Z2567A5EC9705EB7AC2C984033ZE0689DZ06 应用程序：

funcs.js

const uName = 'admin';
const uPass = '12345';
const endpoint = 'http://11.11.111.241:8000';
const resource = {
    questionnaire: 'Questionnaire',
    valueset: 'ValueSet'
}

//get questionnaire
var url = 'http://cihi.ca/fhir/irrs/Questionnaire/abc-abc-community-on';
var quesJson = getData(resource.questionnaire, '?url=' + url);
quesJson = quesJson.entry[0].resource
// saveJsonToFile(quesJson, 'irrsQuesJson');
var copy = $.extend(true, {}, quesJson);
//convert to lhc form
var lformsQ = LForms.Util.convertFHIRQuestionnaireToLForms(quesJson, 'STU3')
// saveJsonToFile(lformsQ, 'lFormJson');
//prepare valuesets
const vsArray = createValueSetData();
//add value sets
injectValueSet(lformsQ);
// saveJsonToFile(lformsQ, 'lFormValueSetInjected');
// Add the form to the page
var options = { 'prepopulate': true };
LForms.Util.addFormToPage(lformsQ, 'formContainer', options);





/////////////////////////////////////////////////////////////////////////////////////////////////////////////
function getData(res, param, log) {
    var data = null;
    var url = endpoint + '/' + res + param;
    $.ajax({
        accepts: {
            json: 'application/fhir+json',
            xml: 'application/fhir+xml'
        },
        dataType: 'json',
        type: 'GET',
        url: url,
        async: false,
        success: function (response) {
            data = response;
            if (log)
                console.log('getData: SUCCESS - "' + url + '"');
        },
        beforeSend: function (xhr) {
            xhr.setRequestHeader("Authorization", "Basic " + btoa(uName + ":" + uPass));
        },
        error: function (err) {
            if (log)
                console.error('getData: FAILED - "' + url + '"')
        }
    });

    return data;
}



//recursively inject valueset into lhc json
function injectValueSet(lhcJson) {
    if (lhcJson && 'items' in lhcJson) {
        lhcJson.items.forEach(e => {
            injectValueSet(e);
        });
    } else {
        if ('answerValueSet' in lhcJson && 'reference' in lhcJson.answerValueSet) {
            lhcJson['answers'] = vsArray[lhcJson.answerValueSet.reference];
        }
    }

}

//save form
function save() {
    var quesResp = LForms.Util.getFormFHIRData('QuestionnaireResponse', 'STU3', '#formContainer');
    saveJsonToFile(quesResp, 'questionnaireResponse' + '-' + new Date().getTime());
    // var newLform = LForms.Util.mergeFHIRDataIntoLForms('QuestionnaireResponse', quesResp, lformsQ, 'STU3');
    // LForms.Util.addFormToPage(newLform, 'formContainer2');
}

//open file
function openQues() {
    var file = $('#file1')[0].files[0];

    const fileReader = new FileReader();
    fileReader.onload = event => {
        var data = JSON.parse(event.target.result);
        var lform = LForms.Util.mergeFHIRDataIntoLForms('QuestionnaireResponse', data, lformsQ, 'STU3');
        injectValueSet(lformsQ);
        LForms.Util.addFormToPage(lform, 'formContainer');
    };
    fileReader.onerror = error => console.error("Error loading file!");
    fileReader.readAsText(file, "UTF-8");
}

// get valueSet count
function getValueSetCount() {
    var count = 0;

    var response = getData(resource.valueset, '?_summary=count');
    if (response) {
        count = response.total;
    }

    return count;
}

//get all valueSets id
function getValueSetIds() {
    var ids = [];

    var count = getValueSetCount();
    var response = getData(resource.valueset, '?_count=' + count + '&_element=id');
    if (response) {
        if ('entry' in response && response.entry.length > 0) {
            response.entry.forEach(e => {
                if ('resource' in e && 'id' in e.resource && 'url' in e.resource) {
                    ids.push({
                        'id': e.resource.id,
                        'url': e.resource.url
                    });
                }
            });
        }
    }

    return ids;
}

//create valueSet array for form fields
function createValueSetData() {
    var data = {}, dataValueSet, failedIds;

    var ids = getValueSetIds();
    if (ids) {

        failedIds = [];

        ids.forEach(idSet => {
            var response = getData(resource.valueset, '/' + idSet.id + '/$expand');
            if (response && 'expansion' in response
                && 'contains' in response.expansion
                && response.expansion.contains.length > 0) {

                dataValueSet = [];
                response.expansion.contains.forEach(e => {
                    dataValueSet.push({
                        'text': e.code + ' - ' + e.display,
                        'code': e.code
                    });
                });

                data[idSet.url] = dataValueSet;
            } else {
                failedIds.push(idSet.id);
            }
        });

        if (failedIds.length > 0) {
            console.error("Failed fetching valueSets for the following IDs: \n Count: "
                + failedIds.length + "\n" + failedIds);
        }
    }

    return data;
}

//save json to file

function saveJsonToFile(json, fileName) {
    var textToSave = JSON.stringify(json);
    var data = new Blob([textToSave], { type: 'text/plain' });
    var textFileURL = window.URL.createObjectURL(data);

    var hiddenElement = document.createElement('a');
    hiddenElement.href = textFileURL;
    hiddenElement.target = '_blank';
    hiddenElement.download = fileName + '.txt';
    hiddenElement.click();
}



**Html file :**


    <!DOCTYPE html>
<html>

<head>
    <link href="https://clinicaltables.nlm.nih.gov/lforms-versions/17.3.2/styles/lforms.min.css" media="screen"
        rel="stylesheet" />
    <link href="https://clinicaltables.nlm.nih.gov/autocomplete-lhc-versions/17.0.3/autocomplete-lhc.min.css"
        rel="stylesheet" />
</head>

<body>
    <button onclick="save()">
        Save QuestionnaireResponse
    </button>
    <input type="file" id="file1">
    <button onclick="openQues()">
        Open QuestionnaireResponse
    </button>
    <div id="formContainer"></div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://clinicaltables.nlm.nih.gov/lforms-versions/17.3.2/lforms.min.js"></script>
    <script src="https://clinicaltables.nlm.nih.gov/lforms-versions/17.3.2/fhir/STU3/lformsFHIR.min.js"></script>
    <script src="https://clinicaltables.nlm.nih.gov/autocomplete-lhc-versions/17.0.3/autocomplete-lhc.min.js"></script>
    <script src="./index.js"></script>
</body>

</html>

2 个解决方案

解决方案1
 1 已采纳  2019-11-01 20:51:48

首先通过angular cli创建一个新组件并在.ts文件中添加变量声明即

const uName = 'admin';
const uPass = '12345';
const endpoint = 'http://11.11.111.241:8000';
const resource = {
    questionnaire: 'Questionnaire',
    valueset: 'ValueSet'
}

//get questionnaire
var url = 'http://cihi.ca/fhir/irrs/Questionnaire/abc-abc-community-on';
var quesJson = getData(resource.questionnaire, '?url=' + url);
quesJson = quesJson.entry[0].resource
// saveJsonToFile(quesJson, 'irrsQuesJson');
var copy = $.extend(true, {}, quesJson);
//convert to lhc form
var lformsQ = LForms.Util.convertFHIRQuestionnaireToLForms(quesJson, 'STU3')
// saveJsonToFile(lformsQ, 'lFormJson');
//prepare valuesets
const vsArray = createValueSetData();
//add value sets
injectValueSet(lformsQ);
// saveJsonToFile(lformsQ, 'lFormValueSetInjected');
// Add the form to the page
var options = { 'prepopulate': true };
LForms.Util.addFormToPage(lformsQ, 'formContainer', options);

然后在.html页面添加html代码

    <button onclick="save()">
        Save QuestionnaireResponse
    </button>
    <input type="file" id="file1">
    <button onclick="openQues()">
        Open QuestionnaireResponse
    </button>
    <div id="formContainer"></div>

然后在 html 文件的标签内添加函数

 function getData(res, param, log) {
    var data = null;
    var url = endpoint + '/' + res + param;
    $.ajax({
        accepts: {
            json: 'application/fhir+json',
            xml: 'application/fhir+xml'
        },
        dataType: 'json',
        type: 'GET',
        url: url,
        async: false,
        success: function (response) {
            data = response;
            if (log)
                console.log('getData: SUCCESS - "' + url + '"');
        },
        beforeSend: function (xhr) {
            xhr.setRequestHeader("Authorization", "Basic " + btoa(uName + ":" + uPass));
        },
        error: function (err) {
            if (log)
                console.error('getData: FAILED - "' + url + '"')
        }
    });

    return data;
}



//recursively inject valueset into lhc json
function injectValueSet(lhcJson) {
    if (lhcJson && 'items' in lhcJson) {
        lhcJson.items.forEach(e => {
            injectValueSet(e);
        });
    } else {
        if ('answerValueSet' in lhcJson && 'reference' in lhcJson.answerValueSet) {
            lhcJson['answers'] = vsArray[lhcJson.answerValueSet.reference];
        }
    }

}

//save form
function save() {
    var quesResp = LForms.Util.getFormFHIRData('QuestionnaireResponse', 'STU3', '#formContainer');
    saveJsonToFile(quesResp, 'questionnaireResponse' + '-' + new Date().getTime());
    // var newLform = LForms.Util.mergeFHIRDataIntoLForms('QuestionnaireResponse', quesResp, lformsQ, 'STU3');
    // LForms.Util.addFormToPage(newLform, 'formContainer2');
}

//open file
function openQues() {
    var file = $('#file1')[0].files[0];

    const fileReader = new FileReader();
    fileReader.onload = event => {
        var data = JSON.parse(event.target.result);
        var lform = LForms.Util.mergeFHIRDataIntoLForms('QuestionnaireResponse', data, lformsQ, 'STU3');
        injectValueSet(lformsQ);
        LForms.Util.addFormToPage(lform, 'formContainer');
    };
    fileReader.onerror = error => console.error("Error loading file!");
    fileReader.readAsText(file, "UTF-8");
}

// get valueSet count
function getValueSetCount() {
    var count = 0;

    var response = getData(resource.valueset, '?_summary=count');
    if (response) {
        count = response.total;
    }

    return count;
}

//get all valueSets id
function getValueSetIds() {
    var ids = [];

    var count = getValueSetCount();
    var response = getData(resource.valueset, '?_count=' + count + '&_element=id');
    if (response) {
        if ('entry' in response && response.entry.length > 0) {
            response.entry.forEach(e => {
                if ('resource' in e && 'id' in e.resource && 'url' in e.resource) {
                    ids.push({
                        'id': e.resource.id,
                        'url': e.resource.url
                    });
                }
            });
        }
    }

    return ids;
}

//create valueSet array for form fields
function createValueSetData() {
    var data = {}, dataValueSet, failedIds;

    var ids = getValueSetIds();
    if (ids) {

        failedIds = [];

        ids.forEach(idSet => {
            var response = getData(resource.valueset, '/' + idSet.id + '/$expand');
            if (response && 'expansion' in response
                && 'contains' in response.expansion
                && response.expansion.contains.length > 0) {

                dataValueSet = [];
                response.expansion.contains.forEach(e => {
                    dataValueSet.push({
                        'text': e.code + ' - ' + e.display,
                        'code': e.code
                    });
                });

                data[idSet.url] = dataValueSet;
            } else {
                failedIds.push(idSet.id);
            }
        });

        if (failedIds.length > 0) {
            console.error("Failed fetching valueSets for the following IDs: \n Count: "
                + failedIds.length + "\n" + failedIds);
        }
    }

    return data;
}

//save json to file

function saveJsonToFile(json, fileName) {
    var textToSave = JSON.stringify(json);
    var data = new Blob([textToSave], { type: 'text/plain' });
    var textFileURL = window.URL.createObjectURL(data);

    var hiddenElement = document.createElement('a');
    hiddenElement.href = textFileURL;
    hiddenElement.target = '_blank';
    hiddenElement.download = fileName + '.txt';
    hiddenElement.click();
}

重要的是将所有脚本导入添加到 index.html 应用程序文件夹之外的主索引

在头部添加这个 -

<link href="https://clinicaltables.nlm.nih.gov/lforms-versions/17.3.2/styles/lforms.min.css" media="screen"
            rel="stylesheet" />
        <link href="https://clinicaltables.nlm.nih.gov/autocomplete-lhc-versions/17.0.3/autocomplete-lhc.min.css"
            rel="stylesheet" />

还有这个——

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://clinicaltables.nlm.nih.gov/lforms-versions/17.3.2/lforms.min.js"></script>
        <script src="https://clinicaltables.nlm.nih.gov/lforms-versions/17.3.2/fhir/STU3/lformsFHIR.min.js"></script>
        <script src="https://clinicaltables.nlm.nih.gov/autocomplete-lhc-versions/17.0.3/autocomplete-lhc.min.js"></script>
        <script src="./index.js"></script>

最后但并非最不重要的一点是在 app.component.html 文件中添加创建组件的选择器

在.html 文件创建的组件中它应该看起来像这样将它添加到app.component.html

解决方案2
 0  2019-11-15 19:16:06

import { Component, OnInit   } from '@angular/core';
import * as $ from 'jquery';
import {OpenQues,save} from '../assets/scripts.js'


declare var tesing: any;

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


export class AppComponent implements OnInit {
  title = 'Look jQuery Animation working in action!';

  public ngOnInit()
  {

    $.getScript('./assets/scripts.js');


  }

  public  open()
  {

    OpenQues();

  }


  public save()
  {

    save();

  }



}

这对我有用

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 我如何使用angular将服务器javascript函数的结果显示到html页面 如何在同一角花括号（{{}}）中动态呈现javascript数据和html？ 如何使用Javascript或jQuery在div中呈现html代码 对于Angular2项目，我如何连接从typescript生成的所有JavaScript文件并将它们添加到我的index.html文件中 如何在javascript中呈现html文件？ 如何获取这些HTML标签以从javascript呈现 如何将 Javascript 添加到 angular html？ （角度）如何获得 html 到 Javascript 中的#tag 定义？ 如何在此JavaScript代码行中添加HTML元素？ 如何将HTML代码从服务器插入Angular？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM