Question

正如所料，在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

Answer 1

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

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

你的HTML中的

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

innerHtml 指令只是用提供的html替换元素的内部html，但是它不会编译它，所以谁来处理编译你的< strong>内部组件？

因此，您需要找到一种动态编译该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 2中的数据渲染静态Angular组件？

1 个答案: