Question

rjf = [ { “ type”：“ title”， “深度”：0， “ text”：“您好，欢迎来到Angular世界” }， { “ type”：“段落”， “深度”：1， “ text”：“ Lorem Ipsum只是印刷和排版行业的虚拟文本” }， { “ type”：“段落”， “ text”：“注册并阅读更多信息”， “深度”：1， { “ type”：“ LINK”， “偏移”：16 “数据”：{ “ url”：“ https://www.google.com” }， } ] } ];

在下面提到的代码中，列表组件是entry组件，我正在尝试使用上述数组在其中绑定内容。

我想做的是，在上面的数组中，如果类型是段落，我希望在

标记内输入以下内容。

Lorem Ipsum只是印刷和排版行业的伪文本

而且我也不需要listcomponent的模板中的'div'标签，'list'{子组件选择器}。我只需要上面的结果。

现在，当我尝试执行此操作时，将得到以下输出。

<app-root >
  <template></template>
  <list>      
    <div><h1>Hello, Welcome to the world of Angular</h1><h1></h1></div>  
  </list>
  <list>      
    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry</div>  
  </list>
  <list>      
    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry</div>  
  </list>
  <list>      
    <div>Registrate and <a href="https://www.google.com">read more</a> about</div>  
  </list>    
</app-root>

The expected result is.

<app-root >
    <template></template>      
    <h1>Hello, Welcome to the world of Angular</h1>  
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>  
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>  
    <p>Registrate and <a href="https://www.google.com">read more</a> about</p>  
</app-root>

app.component.ts
================

import {Component, NgModule,Input,ComponentFactory,ComponentRef, ComponentFactoryResolver, ViewContainerRef, ChangeDetectorRef, TemplateRef, ViewChild, Output, EventEmitter, AfterViewInit} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser';
import {ListComponent} from './list.component';
import {ManageListService} from "./manage-list.service"

@Component({
  selector: 'app-root',
  template: `
    <template #listContainer></template>    
  `,
})
export class App implements AfterViewInit {

 rjf = [
          {
            "type": "title"            
          },
          {
              "type": "paragraph"
          }
       ];

 constructor(private managelistservice : ManageListService) {}

 @ViewChild("listContainer", { read: ViewContainerRef }) container;
 componentRef: ComponentRef;

  constructor(private resolver: ComponentFactoryResolver) {}

  createComponent(objval) {

  const factory: ComponentFactory = this.resolver.resolveComponentFactory(ListComponent);

    this.componentRef = this.container.createComponent(factory);

    this.componentRef.instance.objval = objval;    

  }

    ngOnDestroy() {
      this.componentRef.destroy();    
    }

    ngAfterViewInit(){

      for (let [key, value] of Object.entries(this.rjf)) {

        let compval = this.managelistservice.managelist(value);
        console.log(compval);
        this.createComponent(compval);

      }
    }


}




list.component.ts
=================

import { Component, Input,} from '@angular/core';

@Component({
  selector: "list",
  template: `      

    <div [innerHTML]="objval | noSanitize"></div>  

  `,
})
export class ListComponent {
  @Input() objval;
}


Actual result
=============

<app-root>
    <list>
        <div>
            <h1>...</h1>
        </div>
    </list>
    <list>
        <div>
            <span>...</span>
        </div>
    </list>
    <list>
        <div>
            <span>...</span>
        </div>
    </list>
</app-root>

Expected result
===============

<app-root>
    <h1>...</h1>
    <p>...</p>
    <p>...</p>
</app-root>

任何人都可以为此提供解决方案

更改动态组件中子组件的选择器

0 个答案: