我相信这是一个很容易解决的问题。我试图使用外部。js文件来存储存储为字符串常量的JSON对象列表(见下面的form-json.js)。
这些JSON对象应该能够按名称导入到一个index.html文件中，该文件会加载一个web组件，并将JSON作为输入传递给web组件。
当我将JSON直接硬编码为脚本块中的const时(没有type="module")指令(导入模块所需的)在index.html文件中，它工作得很好。然而，当我试图从导入的.js模块加载相同的JSON块时，我得到未定义。我的代码如下:
index . html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Web Component!</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&family=Titillium+Web:wght@700&display=swap');
</style>
<link rel="stylesheet" href="styles.css"></head>
<body>
<my-form></my-form>
<script src="my-form.js" defer></script>
<script type="module">
import {MY_SCHEMA_FORM} from './form-json.js';
alert('the schema form is:', MY_SCHEMA_FORM); // empty
let el = document.querySelector('my-form');
el.formJson = MY_SCHEMA_FORM; // undefined from component @Input() formJson: string
</script>
</body>
</html>
加载json并变成my-forms.js的angular elements组件
@Input() formJson: string;
myForm$: Observable<object>;
constructor(
private http: HttpClient,
private hostListeners: HostListenerFacade
) {}
ngOnInit() {
console.log('this.formJson:', this.formJson); // UNDEFINED when loaded from an external .js
const MY_SCHEMA_FORM = JSON.parse(this.formJson); // JSON.parse
this.myForm$ = of(MY_SCHEMA_FORM).pipe(
tap(() => console.log('MY_SCHEMA_FORM:',MY_SCHEMA_FORM))
)
}
form-json.js
export const MY_SCHEMA_FORM = "test";
下面的测试工作，如果硬编码到index.html脚本块(但不是type="模块">
<my-form></my-form>
<script>
const MY_SCHEMA_FORM =
`{
"schema": {
"type": "object",
"title": "Address Example from Angular Virtual Conference",
"description": "",
"version": {
"created": "10.3.6",
"modified": "10.3.6"
},
"size": "",
"properties": {
"address-name": {
"type": "string"
},
"address-street": {
"type": "string"
},
"address-city": {
"type": "string"
},
"address-state1678730576920": {
"type": "string"
},
"address-zip": {
"type": "string"
},
"address-newsletter": {
"type": [
"boolean",
"null"
]
},
"address-email": {
"type": "string"
}
},
"required": [
"address-email"
],
"rootWidgetClass": " space-between",
"externalFieldsEvent": "",
"externalFieldsParams": [],
"htmlWrapperClass": ""
},
"layout": [
{
"allowOverride": true,
"appearance": "outline",
"autocomplete": "off",
"dataType": "text",
"debounceCustomEventDelay": 0,
"defaultField": true,
"disabled": false,
"floatLabel": "always",
"panelWidth": " ",
"htmlClass": " ",
"id": "1596465101826",
"itemsLayoutWidth": " ",
"key": "address-name",
"mandatoryField": false,
"title": "Name",
"title_revert": "Name",
"type": "text"
},
{
"name": "section1596465361207",
"type": "div",
"display": "flex",
"flex-direction": "row",
"justify-content": "space-between",
"align-content": "stretch",
"align-items": "stretch",
"flex-wrap": "wrap",
"expanded": true,
"itemsLayoutCols": "col3",
"itemsLayoutOutline": "true",
"itemsLayoutWidth": "full-width",
"htmlClass": "col3 outline full-width",
"id": "1596465361207",
"title": "Address Info",
"items": [
{
"allowOverride": true,
"appearance": "outline",
"autocomplete": "off",
"dataType": "text",
"debounceCustomEventDelay": 0,
"defaultField": true,
"disabled": false,
"floatLabel": "always",
"panelWidth": " ",
"htmlClass": " full-width",
"id": "1596465102653",
"itemsLayoutWidth": "full-width",
"key": "address-street",
"mandatoryField": false,
"title": "Street Address",
"title_revert": "Street Address",
"type": "text"
},
{
"allowOverride": true,
"appearance": "outline",
"autocomplete": "off",
"dataType": "text",
"debounceCustomEventDelay": 0,
"defaultField": true,
"disabled": false,
"floatLabel": "always",
"panelWidth": " ",
"htmlClass": " ",
"id": "1596465103614",
"itemsLayoutWidth": " ",
"key": "address-city",
"mandatoryField": false,
"title": "City",
"title_revert": "City",
"type": "text"
},
{
"allowOverride": true,
"appearance": "outline",
"approverEditable": true,
"defaultField": true,
"disabled": false,
"floatLabel": "always",
"htmlClass": " ",
"id": "1678730576921",
"itemsLayoutWidth": " ",
"key": "address-state1678730576920",
"mandatoryField": true,
"title": "State",
"title_revert": "State",
"type": "select",
"wruxDynamicParams": [
{}
],
"titleMap": [
{
"name": "Alabama",
"value": "AL"
},
{
"name": "Alaska",
"value": "AK"
},
{
"name": "American Samoa",
"value": "AS"
},
{
"name": "Arizona",
"value": "AZ"
},
{
"name": "Arkansas",
"value": "AR"
},
{
"name": "California",
"value": "CA"
},
{
"name": "Colorado",
"value": "CO"
},
{
"name": "Connecticut",
"value": "CT"
},
{
"name": "Delaware",
"value": "DE"
},
{
"name": "District Of Columbia",
"value": "DC"
},
{
"name": "Federated States Of Micronesia",
"value": "FM"
},
{
"name": "Florida",
"value": "FL"
},
{
"name": "Georgia",
"value": "GA"
},
{
"name": "Guam",
"value": "GU"
},
{
"name": "Hawaii",
"value": "HI"
},
{
"name": "Idaho",
"value": "ID"
},
{
"name": "Illinois",
"value": "IL"
},
{
"name": "Indiana",
"value": "IN"
},
{
"name": "Iowa",
"value": "IA"
},
{
"name": "Kansas",
"value": "KS"
},
{
"name": "Kentucky",
"value": "KY"
},
{
"name": "Louisiana",
"value": "LA"
},
{
"name": "Maine",
"value": "ME"
},
{
"name": "Marshall Islands",
"value": "MH"
},
{
"name": "Maryland",
"value": "MD"
},
{
"name": "Massachusetts",
"value": "MA"
},
{
"name": "Michigan",
"value": "MI"
},
{
"name": "Minnesota",
"value": "MN"
},
{
"name": "Mississippi",
"value": "MS"
},
{
"name": "Missouri",
"value": "MO"
},
{
"name": "Montana",
"value": "MT"
},
{
"name": "Nebraska",
"value": "NE"
},
{
"name": "Nevada",
"value": "NV"
},
{
"name": "New Hampshire",
"value": "NH"
},
{
"name": "New Jersey",
"value": "NJ"
},
{
"name": "New Mexico",
"value": "NM"
},
{
"name": "New York",
"value": "NY"
},
{
"name": "North Carolina",
"value": "NC"
},
{
"name": "North Dakota",
"value": "ND"
},
{
"name": "Northern Mariana Islands",
"value": "MP"
},
{
"name": "Ohio",
"value": "OH"
},
{
"name": "Oklahoma",
"value": "OK"
},
{
"name": "Oregon",
"value": "OR"
},
{
"name": "Palau",
"value": "PW"
},
{
"name": "Pennsylvania",
"value": "PA"
},
{
"name": "Puerto Rico",
"value": "PR"
},
{
"name": "Rhode Island",
"value": "RI"
},
{
"name": "South Carolina",
"value": "SC"
},
{
"name": "South Dakota",
"value": "SD"
},
{
"name": "Tennessee",
"value": "TN"
},
{
"name": "Texas",
"value": "TX"
},
{
"name": "Utah",
"value": "UT"
},
{
"name": "Vermont",
"value": "VT"
},
{
"name": "Virgin Islands",
"value": "VI"
},
{
"name": "Virginia",
"value": "VA"
},
{
"name": "Washington",
"value": "WA"
},
{
"name": "West Virginia",
"value": "WV"
},
{
"name": "Wisconsin",
"value": "WI"
},
{
"name": "Wyoming",
"value": "WY"
}
]
},
{
"allowOverride": true,
"appearance": "outline",
"autocomplete": "off",
"dataType": "text",
"debounceCustomEventDelay": 0,
"defaultField": true,
"disabled": false,
"floatLabel": "always",
"panelWidth": " ",
"htmlClass": " ",
"id": "1596465235450",
"itemsLayoutWidth": " ",
"key": "address-zip",
"mandatoryField": false,
"title": "Zip",
"title_revert": "Zip",
"type": "text"
}
],
"defaultField": false,
"mandatoryField": false,
"allowOverride": true
},
{
"allowOverride": true,
"color": "primary",
"customCSS": "top-margin-none",
"defaultField": true,
"disabled": false,
"htmlClass": " top-margin-none ",
"id": "1596465446273",
"itemsLayoutWidth": " ",
"key": "address-newsletter",
"mandatoryField": false,
"title": "Newsletter?",
"title_revert": "Newsletter?",
"type": "checkbox",
"wruxDynamicParams": [
{}
],
"customDataType": "boolean",
"truthyValue": "true",
"falsyValue": "false",
"defaultValue": "false"
},
{
"allowOverride": true,
"appearance": "outline",
"approverEditable": true,
"defaultField": true,
"disabled": false,
"floatLabel": "always",
"htmlClass": " ",
"id": "1596465231494",
"itemsLayoutWidth": " ",
"key": "address-email",
"mandatoryField": true,
"title": "Remote Employees Email Lookup",
"title_revert": "State",
"type": "select",
"wruxDynamic": true,
"wruxDynamicHook": "getEndpoint",
"wruxDynamicParams": [
{
"name": "_endpoint",
"value": "jsonplaceholder.typicode.com/users"
},
{
"name": "_labelKey",
"value": "username"
},
{
"name": "_valueKey",
"value": "email"
}
],
"validationMessages": {
"required": "Required"
},
"logic": {
"00|do": {
"00|something": "address-newsletter",
"01|=:boolean": true,
"02|show": true
}
}
}
],
"data": {}
}`;
let el = document.querySelector('my-form');
el.formJson = MY_SCHEMA_FORM;
</script>
与注释一样，变量名为MY_SCHEMA_FORM。
<my-form></my-form>
<script src="my-form.js" defer></script>
<script type="module">
import {MY_SCHEMA_FORM} from 'data:text/javascript;base64,ZXhwb3J0IGNvbnN0IE1ZX1NDSEVNQV9GT1JNID0gYHsKICAgIHNjaGVtYTogewogICAgdHlwZTogIm9iamVjdCIsCiAgICB0aXRsZTogIlJlbW90ZSBBUEkgQ2FsbCBFeGFtcGxlIiwKICAgIGRlc2NyaXB0aW9uOiAiTWFrZXMgYW4gSFRUUCBnZXQgdXNpbmcgbmV3IGdldEVuZHBvaW50KCkgY2FsbCIsCiAgICB2ZXJzaW9uOiB7CiAgICAgICAgY3JlYXRlZDogIjEwLjMuNiIsCiAgICAgICAgbW9kaWZpZWQ6ICIxMC4zLjYiCiAgICB9LAogICAgc2l6ZTogIiIsCiAgICBwcm9wZXJ0aWVzOiB7CiAgICAgICAgInNlbGVjdC11c2VycyI6IHsKICAgICAgICB0eXBlOiAic3RyaW5nIgogICAgICAgIH0sCiAgICAgICAgInNlbGVjdC1wcm9kdWN0cyI6IHsKICAgICAgICB0eXBlOiAic3RyaW5nIgogICAgICAgIH0sCiAgICAgICAgYnJld2VyeTogewogICAgICAgIHR5cGU6ICJzdHJpbmciCiAgICAgICAgfQogICAgfSwKICAgIHJlcXVpcmVkOiBbXSwKICAgIHJvb3RXaWRnZXRDbGFzczogIiAgc3BhY2UtYmV0d2VlbiIsCiAgICBleHRlcm5hbEZpZWxkc0V2ZW50OiAiIiwKICAgIGV4dGVybmFsRmllbGRzUGFyYW1zOiBbCiAgICAgICAgewogICAgICAgIHBhcmFtTmFtZTogIiIsCiAgICAgICAgcGFyYW1WYWx1ZTogIiIKICAgICAgICB9CiAgICBdLAogICAgaHRtbFdyYXBwZXJDbGFzczogIiIKICAgIH0sCiAgICBsYXlvdXQ6IFsKICAgIHsKICAgICAgICBhbGxvd092ZXJyaWRlOiB0cnVlLAogICAgICAgIGFwcGVhcmFuY2U6ICJvdXRsaW5lIiwKICAgICAgICBkZWZhdWx0RmllbGQ6IHRydWUsCiAgICAgICAgZGVzY3JpcHRpb246ICJodHRwczovL2pzb25wbGFjZWhvbGRlci50eXBpY29kZS5jb20vdXNlcnMiLAogICAgICAgIGRpc2FibGVkOiBmYWxzZSwKICAgICAgICBmbG9hdExhYmVsOiAiYWx3YXlzIiwKICAgICAgICBodG1sQ2xhc3M6ICIgICAiLAogICAgICAgIGlkOiAiMTY3ODM5NjkxODAxNiIsCiAgICAgICAgaXRlbXNMYXlvdXRXaWR0aDogIiAiLAogICAgICAgIGtleTogInNlbGVjdC11c2VycyIsCiAgICAgICAgbWFuZGF0b3J5RmllbGQ6IGZhbHNlLAogICAgICAgIHBsYWNlaG9sZGVyOiAiU2VsZWN0IGEgdXNlci4uLiIsCiAgICAgICAgdGl0bGU6ICJKc29uUGxhY2Vob2xkZXIuY29tIiwKICAgICAgICB0aXRsZV9yZXZlcnQ6ICJnZXRFbmRwb2ludCIsCiAgICAgICAgdHlwZTogInNlbGVjdCIsCiAgICAgICAgd3J1eER5bmFtaWM6IHRydWUsCiAgICAgICAgd3J1eER5bmFtaWNIb29rOiAiZ2V0RW5kcG9pbnQiLAogICAgICAgIHdydXhEeW5hbWljUGFyYW1zOiBbCiAgICAgICAgewogICAgICAgICAgICBuYW1lOiAiX2VuZHBvaW50IiwKICAgICAgICAgICAgdmFsdWU6ICJqc29ucGxhY2Vob2xkZXIudHlwaWNvZGUuY29tL3VzZXJzIgogICAgICAgIH0sCiAgICAgICAgewogICAgICAgICAgICBuYW1lOiAiX2xhYmVsS2V5IiwKICAgICAgICAgICAgdmFsdWU6ICJlbWFpbCIKICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgICAgbmFtZTogIl92YWx1ZUtleSIsCiAgICAgICAgICAgIHZhbHVlOiAiaWQiCiAgICAgICAgfQogICAgICAgIF0KICAgIH0KICAgIF0sCiAgICBkYXRhOiB7fQp9YDs=';
let el = document.querySelector('my-form');
el.formJson = MY_SCHEMA_FORM;
console.log('the schema form is:', el.formJson);
</script>