Html Angular 2安全旁路规则应该放在哪个组件中？

我是Angular 2的新手，我正在尝试展示一堆专辑封面。图像的路径由服务器作为相册对象的一部分返回。我遇到了通常的消毒问题

我在这里了解到了解决方案：

在这里：

在这里：

但是，由于在这两种情况下都没有提到总体项目结构，因此我在确定在哪里（哪个文件？）以及如何添加绕过安全规则方面遇到了一些困难。我尝试了所有我能想到的可能性，但都犯了错误。从逻辑上讲，应该将它添加到生成模板的组件中，但是它可能无法直接访问相册对象

代码库是通过遵循上的教程并进行必要的更改而形成的

项目结构：

project 
| index.html
| style.css
|--app 
   | main.ts 
   | app.component.ts 
   | app.component.spec.ts
   | app.module.ts 
   | app.routing.module.ts 
   | albums.component.ts 
   | album-dashboard.component.ts 
   | album.service.ts 
   | album.ts
   | album-detail.component.ts 
   | dashboard.component.html
   | album.component.html 
   | album.detail.component.html 

下面是相关的HTML和TS文件。如果上面的任何其他文件与这个问题相关，我很乐意更新

dashboard.component.html：显示相册的html。请不要建议使用一些信息会被放在最上面，通常这很难处理实际的IMG。我知道style=“…”不是正确的语法，将其更改为线程中显示的语法会产生许多我无法追溯的错误

<div class="grid grid-pad">
  <a *ngFor="let album of albums"  [routerLink]="['/detail', album.id]"  class="col-1-4">
  <div class="module album" style="background-image: url('{{album.path}}');">
      <!-- <h4>{{album.name}}</h4> -->
  </div>
  </a>
</div> 

album-dashboard.component.ts：请注意，这是album集合的组件。作为一个附带问题，我上面链接到的线程要么为当前实例添加静态规则，要么动态添加规则，这是否意味着我必须遍历集合中的每个实例并逐个添加它们

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

import { Album } from './album';
import { AlbumService } from './album.service';

@Component({
  moduleId: module.id,
  selector: 'album-dashboard',
  templateUrl: 'dashboard.component.html',
  styleUrls: [ 'dashboard.component.css' ]
})
export class DashboardComponent implements OnInit {

  albums: Album[] = [];

  constructor(private albumService: AlbumService) { };


  ngOnInit(): void {
    this.albumService.getAlbums()
      .then(albums => this.albums = albums);//.slice(1, 4)); 
  }
 }

app.component.ts

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

@Component({
  moduleId: module.id,
  selector: 'my-app',
  template: `
    <nav>
      <a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>
      <a routerLink="/albums" routerLinkActive="active">Albums</a>
    </nav>
    <router-outlet></router-outlet>
  `,
  styleUrls: ['app.component.css'],
})
export class AppComponent {
  title = 'Production Crew';
}

从'@angular/core'导入{Component}；
@组成部分({
moduleId:module.id，
选择器：“我的应用程序”，
模板：`
仪表板
相册
`,
样式URL:['app.component.css']，
})
导出类AppComponent{
头衔=‘制作人员’；
}

---

感谢您的帮助

固定。对于任何有类似问题的人

请参阅：

以及：

原来style.background-image已被列入xss攻击的“黑名单”，但是style.background和ngStyle属性将起作用

我没有解释为什么这两种方法提供相同的结果，但还不被认为是不安全的。如果我能得到解释，我会更新的

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

@Component({
  moduleId: module.id,
  selector: 'my-app',
  template: `
    <nav>
      <a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>
      <a routerLink="/albums" routerLinkActive="active">Albums</a>
    </nav>
    <router-outlet></router-outlet>
  `,
  styleUrls: ['app.component.css'],
})
export class AppComponent {
  title = 'Production Crew';
}