如何从 Angular 2 中的数据渲染静态 Angular 组件？ [复制]

Posted 2023-03-13

【中文标题】如何从 Angular 2 中的数据渲染静态 Angular 组件？ [复制]

【英文标题】：How can I render static Angular components from data in Angular 2? [duplicate]

【发布时间】：2017-05-13 07:00:44

【问题描述】：

正如预期的那样，在 Angular 2 中，我可以创建组件，如果我在模板中使用它们，它们就会呈现。在这段代码中，"text" 是另一个组件上的选择器，如果我将一些字符串传递给 [value]，它会按预期工作：

@Component(
      selector: 'my-app',
      template: `
        <div class="main">
          <text [value]="testModel.data.value"></text>
        </div>
        `
    )
export class AppComponent   
  name = 'Angular Example';
  testModel = 
    data: 
      value: `Regular string text works fine.`
    
  

但我需要将字符串 html 数据传递到一个组件中，并且该数据还可以包含一个角度组件，更像这样：

@Component(
          selector: 'my-app',
          template: `
            <div class="main">
              <text [value]="testModel.data.value"></text>
            </div>
            `
        )
    export class AppComponent   
      name = 'Angular Example'; 
      testModel = 
        data: 
          value: `<b>Some</b> 
                text value to 
                <inner-component> 
                     this component gets ignored when text is rendered
                </inner-component>
                render
                `
        
      
    

我已经看到了动态生成组件的其他答案，但我不需要它，只是我已经创建的静态预定义组件可能存在于我的数据字符串中。

这里是文本组件：

 import  Component, Input, ViewChild  from '@angular/core';

 @Component(
  selector: 'text',
      template: `
        <div >
            <div  [innerHtml]="value">loading...</div>
        </div>
        `
    )
    export class TextComponent   
      @Input() value: string;
    

理想情况下，我传入的字符串会呈现任何 html 以及呈现任何 Angular。这是我在角度 1 中的意思：https://plnkr.co/edit/FacA3AwOqJA2QARK28c8?p=preview

编辑：不是重复的

我看不出这个笨蛋是怎么回答的：http://plnkr.co/edit/wh4VJG?p=preview

【问题讨论】：

有什么理由不想将其添加为子组件？

我对任何方式都持开放态度，只要它可以在我的 html 字符串中的任何地方找到，甚至不止一次。..

你应该这样做plnkr.co/edit/wh4VJG?p=preview

【参考方案1】：

“我已经看到了动态生成组件的其他答案，但我不需要，只是我已经创建的静态预定义组件可能存在于我的数据字符串中。”

即使只是静态的预定义组件，Angular 也需要编译它，否则它会被视为普通的 html 标签。

在你的 html 中

   <inner-component> 
                 this component gets ignored when text is rendered            
   </inner-component>

innerHtml 指令只是用提供的 html 替换元素的内部 html，但它不会编译它，所以谁来负责编译你的 inner-component ?

因此，您需要找到一种方法来动态编译该 html 片段。

你应该在

How can I use/create dynamic template to compile dynamic Component with Angular 2.0?

Equivalent of $compile in Angular 2

一个有效的例子是http://plnkr.co/edit/wh4VJG?p=preview

【讨论】：

谢谢，但这些是我在谈论的其他答案。我制作了我正在寻找的这个 Angular 1 示例：plnkr.co/edit/FacA3AwOqJA2QARK28c8?p=preview

@jssayin ，伙计，你正在使用 $scope.eval ！！！！ ，在Angular2中没有这样的东西，只有一种方法，那就是上面的链接，