将 Angular 管道应用于 Angular 递归列表模板
Apply Angular Pipe to Angular Recursive List template
我有一个使用 Pipe 的递归 Angular 模板,用于深度嵌套的对象数组,其中我有数据和子项。我的问题是,仅在使用搜索功能时,我使用的管道突出显示了嵌套对象中搜索和找到的数据。 DomSanitizer 可以工作,但它不会绕过安全性,我得到 SafeValue 必须使用 [属性]=binding。
我尝试将其用作 [innerHtml]="item.data | search:searchedData" 但我只获得最高值而不是深层嵌套的子值。
HTML 我用于呈现嵌套数据的模板。
<h1>Angular Recursive List</h1>
<ul>
<ng-template #recursiveList let-users>
<li *ngFor="let item of users">
{{item.data | search:searchedData}}
<ul *ngIf="item.children.length > 0">
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.children }">
</ng-container>
</ul>
</li>
</ng-template>
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: users}"></ng-container>
</ul>
我用来突出显示搜索到的数据的管道。
@Pipe({
name: 'search',
})
export class Search implements PipeTransform {
constructor(private sanitizer: DomSanitizer){}
transform(value: any, args: any): any {
if (!args) {
return value;
}
const val = new RegExp(args, 'gi');
const domElement = value.replace(val, `<mark>${args}</mark>`);
return this.sanitizer.bypassSecurityTrustHtml(domElement);
}
}
我得到的 html 值:
SafeValue must use [property]=binding: Person 1(see http://g.co/ng/security#xss)
SafeValue must use [property]=binding: State(see http://g.co/ng/security#xss)
SafeValue must use [property]=binding: City(see http://g.co/ng/security#xss)
SafeValue must use [property]=binding: Street(see http://g.co/ng/security#xss)
SafeValue must use [property]=binding: Person 2(see http://g.co/ng/security#xss)
SafeValue must use [property]=binding: <mark>State 2</mark> (see http://g.co/ng/security#xss)
SafeValue must use [property]=binding: City(see http://g.co/ng/security#xss)
我通过在 li ngfor 中使用另一个 span 元素来修复它,并使用 innerHtml 应用值,因为 ngfor 元素仍未准备好使用管道。
以下代码修复了我遇到的问题:
<h1>Angular Recursive List</h1>
<ul>
<ng-template #recursiveList let-users>
<li *ngFor="let item of users">
<span [innerHtml]="item.data | search:searchedData"></span>
<ul *ngIf="item.children.length > 0">
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.children }">
</ng-container>
</ul>
</li>
</ng-template>
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: users}"></ng-container>
</ul>
我有一个使用 Pipe 的递归 Angular 模板,用于深度嵌套的对象数组,其中我有数据和子项。我的问题是,仅在使用搜索功能时,我使用的管道突出显示了嵌套对象中搜索和找到的数据。 DomSanitizer 可以工作,但它不会绕过安全性,我得到 SafeValue 必须使用 [属性]=binding。 我尝试将其用作 [innerHtml]="item.data | search:searchedData" 但我只获得最高值而不是深层嵌套的子值。
HTML 我用于呈现嵌套数据的模板。
<h1>Angular Recursive List</h1>
<ul>
<ng-template #recursiveList let-users>
<li *ngFor="let item of users">
{{item.data | search:searchedData}}
<ul *ngIf="item.children.length > 0">
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.children }">
</ng-container>
</ul>
</li>
</ng-template>
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: users}"></ng-container>
</ul>
我用来突出显示搜索到的数据的管道。
@Pipe({
name: 'search',
})
export class Search implements PipeTransform {
constructor(private sanitizer: DomSanitizer){}
transform(value: any, args: any): any {
if (!args) {
return value;
}
const val = new RegExp(args, 'gi');
const domElement = value.replace(val, `<mark>${args}</mark>`);
return this.sanitizer.bypassSecurityTrustHtml(domElement);
}
}
我得到的 html 值:
SafeValue must use [property]=binding: Person 1(see http://g.co/ng/security#xss)
SafeValue must use [property]=binding: State(see http://g.co/ng/security#xss)
SafeValue must use [property]=binding: City(see http://g.co/ng/security#xss)
SafeValue must use [property]=binding: Street(see http://g.co/ng/security#xss)
SafeValue must use [property]=binding: Person 2(see http://g.co/ng/security#xss)
SafeValue must use [property]=binding: <mark>State 2</mark> (see http://g.co/ng/security#xss)
SafeValue must use [property]=binding: City(see http://g.co/ng/security#xss)
我通过在 li ngfor 中使用另一个 span 元素来修复它,并使用 innerHtml 应用值,因为 ngfor 元素仍未准备好使用管道。
以下代码修复了我遇到的问题:
<h1>Angular Recursive List</h1>
<ul>
<ng-template #recursiveList let-users>
<li *ngFor="let item of users">
<span [innerHtml]="item.data | search:searchedData"></span>
<ul *ngIf="item.children.length > 0">
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.children }">
</ng-container>
</ul>
</li>
</ng-template>
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: users}"></ng-container>
</ul>