当通过与<style>标签定义为[innerHTML的]风格的HTML，防止他们影响整个应用

  • Z时代
  • 2024-01-10
  • 分类：问答

基本上我想有一个textarea，用户可以粘贴HTML（的电子邮件），和预览应当显示一个用户。我试图通过采取HTML并将它传递给一个组件实现此渲染字符串作为HTML，这样的事情：当通过与<style>标签定义为[innerHTML的]风格的HTML，防止他们影响整个应用

<div [innerHTML]="html"></div>

这样做的问题是，如果用户写了这样的事情：

<html> 
    <head> 
     <style> 
      h1 {color:red;} 
     </style> 
    </head> 
    <body> 
     <h1>Test</h1> 
    </body> 
</html>

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

我怎样才能使它所以用户添加仅影响底部的组件样式，这使得该HTML？

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

回答：

有关嵌套组件的更多信息，请参阅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 =“htmlPreview”是领带到您的输入特性 */

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

... 
import { AppComponent } from './app.component'; 
import { AppChildComponent } from './appChild.component'; 
@NgModule({ 
    declarations: [ 
    AppComponent, 
    AppChildComponent 
    ], 
    ... 
}) 
export class AppModule { }

以上是 当通过与&lt;style&gt;标签定义为[innerHTML的]风格的HTML，防止他们影响整个应用 的全部内容， 来源链接： utcz.com/qa/258473.html

回到顶部