Angular2 [innerHtml] angular2标签不起作用

12 浏览
0 Comments

Angular2 [innerHtml] angular2标签不起作用

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

@Component({
  selector: 'app-root',
  template: ' ',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  my-html= ' {{variableFromAComponent}}';
}
@Component({
      selector: 'app-a',
      template: ' ',
    })
    export class AComponent {
      @Input('my-html') my-html:any;
      public variableFromAComponent='它起作用了！'; 
    }

我希望在结果中看到：它起作用了！（来自variableFromAComponent），但是我看到的是{{variableFromAComponent}}（angular2标签不起作用）。

0

3 答案

0 Comments

Angular2中的`[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。

0
0 Comments

问题原因：使用Angular2的[innerHtml]属性时，HTML标签和Angular2标签无法正常工作。

解决方法：可以通过以下两种方式解决该问题。

1. 使用组件间的通信方式：如果组件之间存在父子关系，可以使用Input()和Output()来在它们之间传递值。子组件通过Input()获取值，然后在模板中使用{{myHtml}}将其作为innerHTML添加到div中。父组件通过模板将值传递给子组件，如下所示：

import { Component, Input } from '@angular/core';
@Component({
  selector: 'child',
  template: '
{{myHtml}}
',
  providers: [FoodsService]
})
export class ChildComponent implements OnInit {
  @Input() myHtml: string;
}

2. 使用服务：创建一个服务，并将其注入到两个组件中。一个组件可以将值发送到服务中，另一个组件可以从服务中获取该值。在Angular2中，通常使用Observables来实现这一目的，将值作为数据对象传递。

以上是解决Angular2 [innerHtml]属性无法正常工作的问题的两种方法。

0
0 Comments

Angular2中的[innerHtml]属性无法正常工作，这可能是由于以下原因导致的：

1. Angular2中的[innerHtml]属性是用来动态渲染HTML的，但是它无法识别和解析Angular2的标签。这意味着如果在[innerHtml]中包含了Angular2的标签，它们将不会被正确解析和渲染。

要解决这个问题，可以使用angular2-dynamic-component库提供的解决方案。该库提供了一个dynamic-component指令，可以在模板中动态渲染组件。以下是使用dynamic-component解决该问题的代码示例：

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

在上面的代码中，我们使用dynamic-component指令将动态生成的HTML包裹在一个template标签内。通过设置componentTemplate属性，我们可以将包含Angular2标签的HTML传递给dynamic-component指令进行解析和渲染。

这样，就可以解决Angular2 [innerHtml]无法渲染Angular2标签的问题。通过使用angular2-dynamic-component库提供的dynamic-component指令，我们可以在Angular2中动态渲染包含Angular2标签的HTML。

0