Angular2 [innerHtml] angular2 标签不起作用

Posted 2023-05-07

【中文标题】Angular2 [innerHtml] angular2 标签不起作用

【英文标题】：Angular2 [innerHtml] angular2 tag doesn't work

【发布时间】：2017-05-20 14:19:44

【问题描述】：

我想用来自另一个组件的 angular2 标签在我的 a-component 中注入 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 标签不起作用）。

【参考方案1】：

我在angular2-dynamic-component找到了解决方案

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

【参考方案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中的解释

【讨论】：

当然不是。正如我所说，Angular2 不会为以这种方式添加的 HTML 创建组件。

我看了你的加载动态标签的例子。我不想加载组件，我想用 Angular2 标签加载我的 html。我的任务 - 从服务器加载带有 angular2 标签的 html 并将其呈现在另一个组件中。

有一些答案显示了如何在运行时创建新组件。这是从运行时加载的 HTML 创建组件的唯一方法。搜索$compile（目前只能在手机上）

非常感谢您的帮助。我拿了angular2-dynamic-component

【参考方案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 来实现。

【讨论】：

我不只是使用innerHtml。我尝试了你的解决方案，结果 - html 标签和 angular2 标签不起作用

【参考方案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>'
     );

【讨论】：

@Andrei 上周我能够在服务器上使用它渲染 d3 图表，它是实验性的，但如果对您不起作用，请改用 Renderer 类。