honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(benchmarks): use sanitized style values (#12943)

This commit is contained in:
Tobias Bosch 2016-11-17 15:18:10 -08:00 committed by Chuck Jazdzewski
parent ad20d7d260
commit fc5ac1ebc4
3 changed files with 31 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
modules/benchmarks/src/largetable/ng2/table.ts
View File

@ -7,15 +7,18 @@
*/
import {Component, Input, NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserModule, DomSanitizer, SafeStyle} from '@angular/platform-browser';
import {TableCell, emptyTable} from '../util';
let trustedEmptyColor: SafeStyle;
let trustedGreyColor: SafeStyle;
@Component({
selector: 'largetable',
template: `<table><tbody>
<tr *ngFor="let row of data; trackBy: trackByIndex">
<td *ngFor="let cell of row; trackBy: trackByIndex" [style.backgroundColor]="cell.row % 2 ? '' : 'grey'">
<td *ngFor="let cell of row; trackBy: trackByIndex" [style.backgroundColor]="getColor(cell.row)">
{{cell.value}}
</td>
</tr>
@ -26,8 +29,14 @@ export class TableComponent {
data: TableCell[][] = emptyTable;
trackByIndex(index: number, item: any) { return index; }
getColor(row: number) { return row % 2 ? trustedEmptyColor : trustedGreyColor; }
}
@NgModule({imports: [BrowserModule], bootstrap: [TableComponent], declarations: [TableComponent]})
export class AppModule {
constructor(sanitizer: DomSanitizer) {
trustedEmptyColor = sanitizer.bypassSecurityTrustStyle('');
trustedGreyColor = sanitizer.bypassSecurityTrustStyle('grey');
}
}

12
modules/benchmarks/src/tree/ng2/tree.ts
View File

@ -7,20 +7,28 @@
*/
import {Component, NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserModule, DomSanitizer, SafeStyle} from '@angular/platform-browser';
import {TreeNode, emptyTree} from '../util';
let trustedEmptyColor: SafeStyle;
let trustedGreyColor: SafeStyle;
@Component({
selector: 'tree',
inputs: ['data'],
template:
`<span [style.backgroundColor]="data.depth % 2 ? '' : 'grey'"> {{data.value}} </span><tree *ngIf='data.right != null' [data]='data.right'></tree><tree *ngIf='data.left != null' [data]='data.left'></tree>`
`<span [style.backgroundColor]="bgColor"> {{data.value}} </span><tree *ngIf='data.right != null' [data]='data.right'></tree><tree *ngIf='data.left != null' [data]='data.left'></tree>`
})
export class TreeComponent {
data: TreeNode = emptyTree;
get bgColor() { return this.data.depth % 2 ? trustedEmptyColor : trustedGreyColor; }
}
@NgModule({imports: [BrowserModule], bootstrap: [TreeComponent], declarations: [TreeComponent]})
export class AppModule {
constructor(sanitizer: DomSanitizer) {
trustedEmptyColor = sanitizer.bypassSecurityTrustStyle('');
trustedGreyColor = sanitizer.bypassSecurityTrustStyle('grey');
}
}

13
modules/benchmarks/src/tree/ng2_static/tree.ts
View File

@ -7,14 +7,16 @@
*/
import {Component, Input, NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserModule, DomSanitizer, SafeStyle} from '@angular/platform-browser';
import {TreeNode, emptyTree, maxDepth} from '../util';
let trustedEmptyColor: SafeStyle;
let trustedGreyColor: SafeStyle;
function createTreeComponent(level: number, isLeaf: boolean) {
const nextTreeEl = `tree${level+1}`;
let template =
`<span [style.backgroundColor]="data.depth % 2 ? '' : 'grey'"> {{data.value}} </span>`;
let template = `<span [style.backgroundColor]="bgColor"> {{data.value}} </span>`;
if (!isLeaf) {
template +=
`<${nextTreeEl} [data]='data.right'></${nextTreeEl}><${nextTreeEl} [data]='data.left'></${nextTreeEl}>`;
@ -24,6 +26,7 @@ function createTreeComponent(level: number, isLeaf: boolean) {
class TreeComponent {
@Input()
data: TreeNode;
get bgColor() { return this.data.depth % 2 ? trustedEmptyColor : trustedGreyColor; }
}
return TreeComponent;
@ -43,6 +46,10 @@ function createModule(): any {
@NgModule({imports: [BrowserModule], bootstrap: [RootTreeComponent], declarations: [components]})
class AppModule {
constructor(sanitizer: DomSanitizer) {
trustedEmptyColor = sanitizer.bypassSecurityTrustStyle('');
trustedGreyColor = sanitizer.bypassSecurityTrustStyle('grey');
}
}
return AppModule;