如何将 JSON 对象传递给角度自定义元素

Posted 2023-02-22

【中文标题】如何将 JSON 对象传递给角度自定义元素

【英文标题】：How to pass JSON object to angular custom elements

【发布时间】：2019-07-06 20:13:40

【问题描述】：

我使用 CUSTOM_ELEMENTS_SCHEMA 在 Angular 7 中创建了一个自定义元素。 我的 app.module.ts 如下：

    export class AppModule 
     constructor(private injector: Injector) 
     ngDoBootstrap() 
       this.registerCustomElements();
     

    registerCustomElements() 
      const HeaderElement = createCustomElement(AppComponent, 
        injector: this.injector
      );
      const FooterElement = createCustomElement(BcAngFooterComponent, 
        injector: this.injector
      );
      customElements.define("header-element", HeaderElement);
      customElements.define("footer-element", FooterElement);
  

我在 app.component.html 中引用了这些自定义元素，如下所示：

<footer-element footer-data="footerInputData"></footer-element>

此 footerInputData 在我的 app.component.ts 文件中作为字符串引用。

 export class AppComponent 
  footerInputData: any = title: "Page Title";

在我的自定义元素的 HTML 中，我使用插值来显示作为输入传递给它的数据。

<div class="nav-list-wrap">
        footerData
</div>

当页面加载时，我没有看到显示的对象。相反，它显示的是“footerInputData”。

如何让我的自定义元素从我的 app.component.ts 文件中获取数据，而不是将数据显示为字符串。

另外，可以将 JSON 对象传递给我的自定义元素吗？

【问题讨论】：

你能创建同样的堆栈闪电战吗？

@Prashanth 你是如何克服这个问题的？我现在正面临这个问题。

【参考方案1】：

您的footer-data 中应该有一个[]，并且可能需要一个changeDetectRef 来重新检查更改后的值。

第 1 步 ng new testing

第 2 步 ng g c footer

第 3 步 在app.module.ts

import  createCustomElement  from '@angular/elements';
import  FooterComponent  from './footer/footer.component';
...
@NgModule(
  declarations: [AppComponent, FooterComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [FooterComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
)
export class AppModule  
  constructor(private injector: Injector) 
    const customElement = createCustomElement(FooterComponent,  injector );
    customElements.define('some-component', customElement);
  
  ngDoBootstrap()  

第 4 步在app.component.html

<some-component [data]="footerInputData"></some-component>

第 5 步在app.component.ts

...
export class AppComponent 
   footerInputData = "testing": "abc"

footer.component.ts 中的第 6 步

import  Component, OnInit, Input, AfterViewChecked  from '@angular/core';
import  ChangeDetectorRef  from '@angular/core';

@Component(
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.scss']
)
export class FooterComponent implements OnInit, AfterViewChecked 

  @Input() public data: any;
  displayedData = ""

  constructor(
    private cdRef:ChangeDetectorRef
  )  

  ngOnInit() 

  

  ngAfterViewChecked()  
    this.displayedData = this.data
    this.cdRef.detectChanges();
  

第 7 步在footer.component.html

<p>
   displayedData | json 
</p>

【讨论】：

我将 Angular 与 AEM 结合使用，为此我正在使用 Angular 自定义元素。因此，我需要一个将对象数组传递给自定义元素的解决方案。

@Prashanth 我已经编辑了答案。它能够在上面的例子中传递 json。让我知道它是否适合您的场景。

【参考方案2】：

自定义元素旨在在 Angular 包装器之外使用，即使您可以在 Angular 包装器内部使用它们。 当您在角度包装器之外使用它们时，您需要像这样使用它

<footer-element name='"title": "Page Title"'></footer-element> 

属性值应该是字符串化的，如果你传递的是json，那么json字符串应该是严格格式化的。

当您在角度包装器中使用它时，您可以将它与角度选择器一起使用，并且可以像旧方法一样传递数据。

<app-custom [name]="name"></app-custom>
//ts file
name = title:"this is title"

自定义component.ts文件

@Component(
  selector: 'app-custom',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
)
export class AppComponent 
  @Input() name: any;

app.module.ts

@NgModule(
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent, MainComponent],
  entryComponents:[
    AppComponent, MainComponent
  ]
)
export class AppModule 
  constructor(private injector: Injector)  
  ngDoBootstrap() 
    //bootstraping angular app
    const AppElement = createCustomElement(MainComponent,  injector: this.injector );
    customElements.define('my-app', AppElement);

    //bootstraping custom element
    const el = createCustomElement(AppComponent,  injector: this.injector );
    customElements.define('footer-element', el);
  

Check out the working example

【讨论】：

很好的例子！非常感谢！现在我正在尝试找出正确的 Angular 语法以将变量作为对象的一部分传递..

【参考方案3】：

这是我得到这个为我工作的唯一方法，希望这可以帮助你们： 注意：每次更改属性值时都会触发类型脚本代码：

<body>
 <my-element settings=""></my-element>
 <script>
    var myConfig = name: "oswaldo"

    var element = document.getElementsByTagName("my-element")[0];
    if(element)
      element.setAttribute("settings", JSON.stringify(myConfig));
    
  </script>
</body>

这是我的 .ts 文件中的内容：

@Component(
  selector: 'my-element',
  templateUrl: './my-element.component.html',
  styleUrls: ['./my-element.component.less']
)
export class MyElementComponent implements OnInit 

  @Input('settings') set settings(init: any) 
    if (init) 
      const myset = JSON.parse(init);
      console.log(myset.name);