Angular2 [innerHtml] angular2标记不工作

Question

我想用来自另一个组件的angular2标记将html注入到我的a组件中。

@Component({
  selector: 'app-root',
  template: '<app-a [my-html]="my-html"> </app-a>',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  my-html= '<span> {{variableFromAComponent}}</span>';
}



@Component({
      selector: 'app-a',
      template: '<div [innerHtml]="my-html"> </div>',
    })
    export class AComponent {
      @Input('my-html') my-html:any;
      public variableFromAComponent='its work!'; 
    }

我想看看结果:它的工作！(从variableFromAComponent)但是我看到{{variableFromAComponent}} (angular2标记不起作用)。

Answer 1

我在Angular2-动态分量中找到了一个解决方案

<template dynamic-component
          [componentContext]="self"
          [componentModules]="dynamicExtraModules"
          [componentTemplate]='"here html tags with angular2 tags"'>
</template>

Answer 2

根本不处理[innerHTML]="..."添加的HTML。它只是按原样添加，仅此而已。您甚至可能需要使用消毒液，因此不会因为安全原因而剥离任何东西(请参阅在RC.1中，有些样式不能使用绑定语法添加)。

如果要动态添加组件，可以使用ViewContainerRef.createComponent() (例如，如在使用用户单击所选组件的角2动态制表符中解释)

Answer 3

有几种方法你可以做到这一点。

构件相互作用

如果组件之间存在父/子关系，则可以使用Input()和Output()在它们之间传递值。

此子组件通过Input()获取值。

child.component.ts

import { Component, Input } from '@angular/core';
@Component({
  selector: 'child',
  template: '<div>{{myHtml}}</div>', // these curly braces add the text as innerHTML
  providers: [ FoodsService]
})
export class ChildComponent implements OnInit {
   @Input() myHtml: string;
}

它是通过模板从父级传递的：

parent.component.html

<child [myHtml]="'You're String Here (or a variable set to "its work")'"></child>

您可以使用Output()从一个孩子转到另一个家长。

服务

另一种方法是创建一个注入到两个组件中的服务。一个组件可以向服务发送一个值，另一个组件可以得到这个值。在Angular2中，这通常是通过对数据对象使用观测值来实现的。