将带有<style>标签中定义的样式的html传递给[innerHTML]时，请阻止它们影响整个应用程序

Question

基本上我正在尝试使用 textarea ，用户可以粘贴html（用于电子邮件），并且应该向用户显示预览。我尝试通过获取html并将其传递给组件以将字符串呈现为html来实现这一点，如下所示：

＆＃xA;＆＃xA;

 ＆lt; div [innerHTML] = “html”＆gt;＆lt; / div＆gt;＆＃xA;  

＆＃xA;＆＃xA;

这个问题是，如果用户写了这样的内容：

＆＃XA;＆＃XA;

 <代码>＆LT; HTML＆GT;＆＃XA; ＆LT; HEAD＆GT;＆＃XA; ＆LT;风格＆GT;＆＃XA; h1 {color：red;}＆＃xA; ＆LT; /风格＆GT;＆＃XA; ＆LT; /头＆GT;＆＃XA; ＆LT;身体GT;＆＃XA; ＆LT; H1＆GT;试验＆LT; / H1＆GT;＆＃XA; ＆lt; / body＆gt;＆＃xA;＆lt; / html＆gt;＆＃xA;  

＆＃xA;＆＃xA;

该组件将正确呈现此html，但样式会影响整个应用程序。

＆＃xA;＆＃xA;

＆＃xA;＆＃xA;

＆＃xA;＆＃xA;

我怎样才能使用户添加的样式只影响底部的组件，这会产生html？

＆＃xA;＆＃xA;

我知道作用于组件的样式，但这不完全是因为我不是定义这些样式的样式。

＆＃xA;

Answer 1

有关Angular documentation中嵌套组件的更多信息。 你得到了整个html的替代品，因为在深层次你正在这样做。让我澄清一下。你需要构建一个可嵌套的组件来与之交谈，并传递它的html视图。

app.component.ts（容器组件）

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

@Component({
  selector: 'app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  /* Bound property to get the html from your texarea element */
  html: any;
  pageTitle: string = 'I am a container';
}

<强> app.component.html

<!-- this styles classes are from bootstrap -->
<div class="panel panel-primary">
  <div class="panel-heading" >
    {{ pageTitle }}
  </div>
  <div class="panel-body">
    <div class="row">
      <div class="col-md-2"></div>
      <div class="col-md-4">
        <div class="form-group">
          <label for="exampleFormControlTextarea1">Add Html:</label>
          <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" [(ngModel)]='html' ></textarea>
        </div>
      </div>
    </div>
    <app-child [htmlPreview]='html'></app-child>
  </div>  
</div>

这是您的子组件的代码： 的 appChild.component.ts

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

@Component({
  selector: 'app-child',
  templateUrl: './appChild.component.html'
})
export class AppChildComponent {
  /* This is an Input property that tells Angular where to place the html from your textArea element */
  @Input() htmlPreview;

}

最后是 appChild.component.html

<div class="panel panel-primary" [innerHtml]='htmlPreview'>
  <div class="panel-heading"></div>
</div>

/ *实际上你放在这里并不重要，因为它将取代你文本区域的html。 但真正重要的是[innerHtml] =＆＃39; htmlPreview＆＃39;与您的输入属性相关联 * /

不要忘记在您的模块上添加AppChild组件：

...

import { AppComponent } from './app.component';
import { AppChildComponent } from './appChild.component';

@NgModule({
  declarations: [
    AppComponent,
    AppChildComponent
  ],
  ...
})
export class AppModule { }