Question

我希望在“示例作品！”下面显示原始HTML代码（example.component.html）。该页面应显示以下内容：

example works!    
<p>   
  example works!
</p>

我可以找到各种资源，展示如何使用AngularJS而不是Angular 6来完成此工作。

我尝试使用[innerHTML]，但这没用。

<p>
  example works!
</p>

example.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'rt-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

app.component.html

<div style="text-align:center">
  <rt-example></rt-example>
</div>

输出。。 link to image

Answer 1

您可以使用ViewContainerRef获取nativeElement并获取其innerHTML。

只是警告：这不是您的HTML代码，而是经过编译的代码。

这里是一个示例：stackblitz

export class AppComponent  {
  htmlContent: string;
  constructor(private view: ViewContainerRef) {
    setTimeout(() => this.htmlContent = (view.element.nativeElement as HTMLElement).innerHTML);
  }
}

编辑：如果要使用未编译的代码，则应使用以下表示法：stackblitz

import { Component, ViewContainerRef } from '@angular/core';
import * as template from "./app.component.html";


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  htmlContent: string = template.default;
  constructor(private view: ViewContainerRef) {
  }
}

但是我建议您使用最新版本的Typescript和Angular，因为我不确定何时引入。

Answer 2

使用ViewChild获取指向该组件的引用，例如

export class AppComponent  {
  @ViewChild(ExampleComponent, { read: ElementRef }) exampleComponent;
}

然后，您可以使用nativeElement.innerHTML访问其HTML。

因此您可以将app.component.html更改为此：

<div style="text-align:center">
  <rt-example></rt-example>
</div>

{{exampleComponent.nativeElement.innerHTML}}

Answer 3

在HTML中，您需要使用entities来显示保留字符。

<p>example works!</p>

<code>&lt;p&gt;example works!&lt;/p&gt;</code>

例如：

&等效于&

<等效于<

>等效于>

但是使用角度的解决方案是：

组件：

export class SomeComponent  {
  code :string = `<p>example</p>`
}

HTML：

<code>{{this.code}}</code>

或使用InnerText代替InnerHTML

<p [innerText]="code"></p>

https://stackblitz.com/edit/angular-5cpmcr

Answer 4

确保已将新组件添加到app.module.ts。要知道在创建新组件后应该添加什么以及在哪里添加，可以使用angularCLI：

settings.py

这将生成一个名为“ yourComponentName”的新组件并更新app.module.ts文件，以便您可以使用它。

显示原始HTML-Angular 6

4 个答案: