Question

我想在我的a-component中使用来自另一个组件的angular2标签注入html。

@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-dynamic-component

中找到了解决方案

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

Answer 2

Angular根本不处理由[innerHTML]="..."添加的HTML。它只是按原样添加，就是这样。您甚至可能需要使用Sanitizer，因此出于安全原因不会剥离任何内容（请参阅In RC.1 some styles can't be added using binding syntax）。

如果您想动态添加组件，可以使用ViewContainerRef.createComponent()，例如Angular 2 dynamic tabs with user-click chosen components

中所述

Answer 3

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

COMPONENT INTERACTION

如果组件之间存在父/子关系，那么您可以使用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()从孩子到父母。

SERVICES

另一种方法是创建一个注入两个组件的服务。一个组件可以向服务发送值，另一个组件可以获取该值。在Angular2中，通常通过将observables用于数据对象来实现。

Answer 4

您可以使用Renderer2 Class。

import { ElementRef, Renderer2 } from '@angular/core';

constructor (
  private elementRef: ElementRef,
  private renderer: Renderer
) {}

public ngAfertViewInit(): void {
  this.renderer
     .setElementProperty(
        this.elementRef.nativeElement, 
        'innerHTML',
        '<h1> Nice Title </h1>'
     );
}

Angular2 [innerHtml] angular2标签不起作用

4 个答案: