angular7中渲染html数据，解决样式无效问题

快来打我* 2024-04-17 05:38 44阅读 0赞

在angular项目中，往页面上渲染html数据的时候，使用的是\[innerHTML\]来渲染，一般渲染富文本中的Html数据，比如新闻详情之类。但是发现，渲染之后，没有了行内样式。解决方法如下：

#### 在app下新建管道文件 ####

ng g pipe pipes/html

![在这里插入图片描述][20190823085126959.png]  
在HtmlPipe管道中，写入如下代码：

import { Pipe, PipeTransform } from '@angular/core';
    import { DomSanitizer } from '@angular/platform-browser';
    
    @Pipe({
        name: 'html'
    })
    export class HtmlPipe implements PipeTransform {
    
        constructor(private sanitizer: DomSanitizer) {}
    
        transform(style: any) {
            return this.sanitizer.bypassSecurityTrustHtml(style);
        }
    
    }

#### 在用到的模块中引入管道 ####

news-detail.module.ts

import { HtmlPipe } from 'src/app/pipes/html.pipe';
    
    @NgModule({
    	  declarations: [NewsDetailComponent, HtmlPipe],
    	  imports: [
    		    CommonModule,
    		    NewsDetailRoutingModule,
    		    SharedModule
    	  ]
    })

#### 在html中使用 ####

#### 使用常见问题 ####

因为很多时候项目是模块化开发的，所有页面分为很多个模块，如果这个管道需要在很多模块中都使用到，每个模块都引入就会报错，如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]  
放到app的根模块中，也会报错

#### 解决方法 ####

一般我们都有一个共享模块，将各个模块公用的组件等内容引入，然后在其他模块中导入这个共享模块。

shared.module.ts

import { HtmlPipe } from 'src/app/pipes/html.pipe';
    @NgModule({
        declarations: [HeaderComponent, FooterComponent, BannerComponent, SideMenuComponent, HtmlPipe],
        imports: [
            CommonModule,
            RouterModule
        ],
        exports: [
            HeaderComponent,
            FooterComponent,
            BannerComponent,
            SideMenuComponent,
            HtmlPipe
        ]
    })
    export class SharedModule { }

这样就解决了上述报错问题，实现html的正常渲染

[20190823085126959.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/c78b2b44de0f42c4a57e5eee69447a9a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/3180db361a9d456b880ffacb1a28ac4c.png