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

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

Browse Source
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 {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'; import {TableCell, emptyTable} from '../util';
let trustedEmptyColor: SafeStyle;
let trustedGreyColor: SafeStyle;
@Component({ @Component({
selector: 'largetable', selector: 'largetable',
template: `<table><tbody> template: `<table><tbody>
<tr *ngFor="let row of data; trackBy: trackByIndex"> <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}} {{cell.value}}
</td> </td>
</tr> </tr>
@ -26,8 +29,14 @@ export class TableComponent {
data: TableCell[][] = emptyTable; data: TableCell[][] = emptyTable;
trackByIndex(index: number, item: any) { return index; } trackByIndex(index: number, item: any) { return index; }
getColor(row: number) { return row % 2 ? trustedEmptyColor : trustedGreyColor; }
} }
@NgModule({imports: [BrowserModule], bootstrap: [TableComponent], declarations: [TableComponent]}) @NgModule({imports: [BrowserModule], bootstrap: [TableComponent], declarations: [TableComponent]})
export class AppModule { 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 {Component, NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser'; import {BrowserModule, DomSanitizer, SafeStyle} from '@angular/platform-browser';
import {TreeNode, emptyTree} from '../util'; import {TreeNode, emptyTree} from '../util';
let trustedEmptyColor: SafeStyle;
let trustedGreyColor: SafeStyle;
@Component({ @Component({
selector: 'tree', selector: 'tree',
inputs: ['data'], inputs: ['data'],
template: 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 { export class TreeComponent {
data: TreeNode = emptyTree; data: TreeNode = emptyTree;
get bgColor() { return this.data.depth % 2 ? trustedEmptyColor : trustedGreyColor; }
} }
@NgModule({imports: [BrowserModule], bootstrap: [TreeComponent], declarations: [TreeComponent]}) @NgModule({imports: [BrowserModule], bootstrap: [TreeComponent], declarations: [TreeComponent]})
export class AppModule { 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 {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'; import {TreeNode, emptyTree, maxDepth} from '../util';
let trustedEmptyColor: SafeStyle;
let trustedGreyColor: SafeStyle;
function createTreeComponent(level: number, isLeaf: boolean) { function createTreeComponent(level: number, isLeaf: boolean) {
const nextTreeEl = `tree${level+1}`; const nextTreeEl = `tree${level+1}`;
let template = let template = `<span [style.backgroundColor]="bgColor"> {{data.value}} </span>`;
`<span [style.backgroundColor]="data.depth % 2 ? '' : 'grey'"> {{data.value}} </span>`;
if (!isLeaf) { if (!isLeaf) {
template += template +=
`<${nextTreeEl} [data]='data.right'></${nextTreeEl}><${nextTreeEl} [data]='data.left'></${nextTreeEl}>`; `<${nextTreeEl} [data]='data.right'></${nextTreeEl}><${nextTreeEl} [data]='data.left'></${nextTreeEl}>`;
@ -24,6 +26,7 @@ function createTreeComponent(level: number, isLeaf: boolean) {
class TreeComponent { class TreeComponent {
@Input() @Input()
data: TreeNode; data: TreeNode;
get bgColor() { return this.data.depth % 2 ? trustedEmptyColor : trustedGreyColor; }
} }
return TreeComponent; return TreeComponent;
@ -43,6 +46,10 @@ function createModule(): any {
@NgModule({imports: [BrowserModule], bootstrap: [RootTreeComponent], declarations: [components]}) @NgModule({imports: [BrowserModule], bootstrap: [RootTreeComponent], declarations: [components]})
class AppModule { class AppModule {
constructor(sanitizer: DomSanitizer) {
trustedEmptyColor = sanitizer.bypassSecurityTrustStyle('');
trustedGreyColor = sanitizer.bypassSecurityTrustStyle('grey');
}
} }
return AppModule; return AppModule;