Question

我希望创建一个可以读取当前上下文并将其放入我的字符串模板的管道。

@Component({
  selector: 'myApp',
  template: `
    <input [ngModel]="template">
    <div *ngFor="let a of ['x','y']">
      <div *ngFor="let b of [1,2]">
        <p>output: {{ template | replace:this }}<p> // replace is my custom pipe
      </div>
    </div>
  `
})
class TextComponent {
  attr1= 'Attr1';
  attr2= 'Attr2';
  template: string;
}

@Pipe({
  name: 'replace', pure: false
})
export class ReplacecPipe implements PipeTransform {
  transform(template: string, component: any) {
    // perform replace process
  }
}

因此，如果我放置{{attr1}}然后{{a}}，那么{{b}}＆＃39;进入模板，我期待以下结果：

output: Attr1 then x then 1
output: Attr1 then x then 2
output: Attr1 then y then 1
output: Attr1 then y then 1

我是否有任何语法或关键字可以将其传递给＆＃39;这个＆＃39;。也许$ context？或者angularjs中的$ scope？

请忽略我如何执行替换过程，我只是想知道如何获取视图上下文而不需要我一个接一个地传入a和b，例如＆＃39;替换：this：a：b＆＃39 ;因为地图可能太多了。

首选它可以像以下一样简单：替换：this：$ context＆＃39;，在$ context中我可以获得a，b和其他上下文。

我发布这个问题后2小时，我了解了$隐含但仍然不知道如何在管道中使用它。

Answer 1

这是您在上下文中传递的方式（此处仅针对attr1）：

<input [ngModel]="template">
<div *ngFor="let a of ['x','y']">
  <div *ngFor="let b of [1,2]">
    <p>output: {{ template | myReplace:attr1:a:b }}<p>
  </div>
</div>

以及替换管道：

export class ReplacePipe implements PipeTransform {    
    transform(template: string, attr: string, a: string, b:number) {
        let res = template
                    .replace("{{attr}}", attr)
                    .replace("{{a}}", a)
                    .replace("{{b}}", b.toString());
        return res;
    }
}

下面是一个StackBlitz完整的工作示例，其中显示：

output: Attr1 then x then 1
output: Attr1 then x then 2
output: Attr1 then y then 1
output: Attr1 then y then 1

如何在自定义管道中获取上下文

1 个答案: