如何将此javascript和HTML代码添加到angular项目中？我可以从javascript函数以角度呈现html吗？
如何将此javascript和HTML代码添加到angular项目中？ 我已将func.js放在angular项目和app.component.ts文件的src文件夹中 我尝试导入并使用ngAfterViewInit（）加载并使用javascript函数 以下是我试图添加到angular web应用程序的javascript和html文件： funcs.js如何将此javascript和HTML代码添加到angular项目中？我可以从javascript函数以角度呈现html吗？,javascript,angular,angular7,angular8,angular-components,Javascript,Angular,Angular7,Angular8,Angular Components,如何将此javascript和HTML代码添加到angular项目中？ 我已将func.js放在angular项目和app.component.ts文件的src文件夹中 我尝试导入并使用ngAfterViewInit（）加载并使用javascript函数 以下是我试图添加到angular web应用程序的javascript和html文件： funcs.js const uName='admin'； 常数uPass='12345'； 常数端点http://11.11.111.241:8000';
const uName='admin'；
常数uPass='12345'；
常数端点http://11.11.111.241:8000';
常量资源={
问卷：'问卷'，
valueset:“valueset”
}
//获取调查问卷
var url='1〕http://cihi.ca/fhir/irrs/Questionnaire/abc-abc-community-on';
var quesJson=getData（resource.inventory“？url=”+url）；
quesJson=quesJson.entry[0]。资源
//saveJsonToFile（quesJson，'irrsQuesJson'）；
var copy=$.extend（true，{}，quesJson）；
//转换为lhc形式
var lformsQ=LForms.Util.convertfhirQuestionnaireToolforms（quesJson，“STU3”）
//saveJsonToFile（lformsQ，“lFormJson”）；
//准备值集
const vsArray=createValueSetData（）；
//附加值集
injectValueSet（lformsQ）；
//saveJsonToFile（lformsQ，“lFormValueSetInjected”）；
//将表单添加到页面
var options={'prepopulate'：true}；
LForms.Util.addFormToPage（lformsQ，'formContainer'，选项）；
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
函数getData（res、param、log）{
var数据=null；
var url=endpoint+'/'+res+param；
$.ajax({
接受：{
json:'application/fhir+json'，
xml:“应用程序/fhir+xml”
},
数据类型：“json”，
键入：“GET”，
url:url，
async:false，
成功：功能（响应）{
数据=响应；
如果（日志）
log（'getData:SUCCESS-“'+url+”）；
},
发送前：函数（xhr）{
xhr.setRequestHeader（“授权”、“基本”+btoa（uName+：“+uPass））；
},
错误：函数（err）{
如果（日志）
控制台。错误（'getData:失败-“+url+”））
}
});
返回数据；
}
//递归地将valueset注入lhc json
函数injectValueSet（lhcJson）{
if（lhcJson和lhcJson中的“项目”）{
lhcJson.items.forEach（e=>{
输入值集（e）；
});
}否则{
if（lhcJson中的“answerValueSet”和lhcJson.answerValueSet中的“reference”）{
lhcJson['answers']=vsArray[lhcJson.answerValueSet.reference]；
}
}
}
//保存形式
函数save（）{
var quesResp=LForms.Util.getFormFHIRData（'QuestionnaireResponse'，'STU3'，'#formContainer'）；
saveJsonToFile（quesResp，'questionnaireResponse'+'-'+newdate（）.getTime（））；
//var newLform=LForms.Util.mergeFHIRDataIntoLForms（'QuestionnaireResponse'，quesResp，lformsQ，'STU3'）；
//LForms.Util.addFormToPage（newLform，'formContainer2'）；
}
//打开文件
函数openQues（）{
var file=$（'#file1'）[0]。文件[0]；
const fileReader=new fileReader（）；
fileReader.onload=事件=>{
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（“加载文件时出错！”）；
readAsText（文件，“UTF-8”）；
}
//获取值集计数
函数getValueSetCount（）{
var计数=0；
var response=getData（resource.valueset，“？_summary=count”）；
如果（答复）{
count=response.total；
}
返回计数；
}
//获取所有值集id
函数getValueSetId（）{
var-id=[]；
var count=getValueSetCount（）；
var response=getData（resource.valueset，'？_count='+count+'&_element=id'）；
如果（答复）{
如果响应中的（'entry'）&&response.entry.length>0）{
response.entry.forEach（e=>{
if（e.resource中的“资源”和e.resource中的“id”和e.resource中的“url”）{
id.push({
“id”：e.resource.id，
“url”：e.resource.url
});
}
});
}
}
返回ID；
}
//为表单字段创建值集数组
函数createValueSetData（）{
var data={}，dataValueSet，failedds；
var id=getValueSetIds（）；
如果（ID）{
failedds=[]；
id.forEach（idSet=>{
var response=getData（resource.valueset'/'+idSet.id+'/$expand'）；
如果（响应&“扩展”响应
&&response.expansion中的“contains”
&&response.expansion.contains.length>0）{
dataValueSet=[]；
response.expansion.contains.forEach（e=>{
dataValueSet.push({
“文本”：e.code+'-'+e.display，
“代码”：e.code
});
});
数据[idSet.url]=数据值集；
}否则{
failedIds.push（idSet.id）；
}
});
如果（failedds.length>0）{
console.error（“获取以下ID的值集失败：\n计数：”
+failedIds.length+“\n”+failedIds）；
}
}
返回数据；
}
//将json保存到文件
函数saveJsonToFile（json，文件名）{
var textToSave=JSON.stringify（JSON）；
var data=newblob（[textToSave]，{type:'text/plain'}）；
var textFileURL=window.URL.createObjectURL（数据）；
var hiddenElement=document.createElement（'a'）；
hiddenElement.href=textFileURL；
hiddenElement.target='_blank'；
hiddenElement.download=fileName+'.txt'；
hiddenElement.click（）；
}
**Html文件：**
拯救
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>
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);
<button onclick="save()">
Save QuestionnaireResponse
</button>
<input type="file" id="file1">
<button onclick="openQues()">
Open QuestionnaireResponse
</button>
<div id="formContainer"></div>
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();
}
<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>
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();
}
}