Angular 2 Security Bypassルールはどのコンポーネントに配置する必要がありますか？

私はAngular 2にはかなり新しく、アルバムカバーの束を表示しようとしています。イメージへのパスは、サーバーによってAlbumオブジェクトの一部として返されます。私は通常の消毒の問題に遭遇した。Angular 2 Security Bypassルールはどのコンポーネントに配置する必要がありますか？

私はここに解決策について読ん

：ここAngular 2, 2.0.0-rc.2, Cannot apply inline css3 transform with style directive

を：Angular2 - WARNING: sanitizing unsafe style value url(SafeValue must use [property]=binding:

、ここで：https://angular.io/docs/ts/latest/guide/security.html#!#bypass-security-apis

をしかし、プロジェクト全体の構造は、これらの例のいずれかで言及されていないので、私が持っています私はバイパスセキュリティルールをどのように追加しなければならないのか分かりません。私は考えることができるすべての可能性を試しましたが、すべてがエラーを投げます。論理的には、テンプレートを生成するコンポーネントに追加する必要がありますが、Albumオブジェクトに直接アクセスすることはできません。

チュートリアルのwww.angular.ioに沿ってコードベースを作成し、必要な変更を加えました。

プロジェクト構造：

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。いくつかの情報を使って、実際の画像を扱うのは難しいです。私はスレッドで示されたものに変更する、意識スタイル=「...」は、正しい構文ではありません、私は戻って

<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.ts

をトレースすることができませんでしたエラーの多くを作成しています

export class Album { 
    id: number; 
    name: string; 
    artist: string; 
    path: string; 
}

album-dashboard.component.ts：これはアルバムコレクションのコンポーネントであることに注意してください。私が上にリンクしたスレッドは、静的ルールを追加するか、現行インスタンスのルールを動的に追加します。これは、コレクションの各インスタンスを反復して1つずつ追加する必要があることを意味しますか？

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'; 
}

すべてのヘルプは大歓迎です！

出典

2017-01-27 sinanspd