如何在html中使用来自变量的管道？角 9答案

【问题标题】：How to use a pipe from variable in html? Angular 9如何在html中使用来自变量的管道？角 9
【发布时间】：2020-07-17 08:07:01
【问题描述】：

我将整个管道作为参数之一传递，但我很难使用它。
对象格式如下：

{
    column: 'productExpirationDate', 
    caption: 'Product expiration date', 
    pipe: 'date: \"' + PIPE_DATE_FORMAT + '\"' 
},

虽然PIPE_DATE_FORMAT 持有'yyyy-MM-dd'，但输出格式应为'date: "yyyy-MM-dd"'
如果我尝试在 html 文件中使用它，例如

<span *ngIf="element.pipe">{{ row[element.column] | element.pipe }}</span>

它大叫

解析器错误：意外的标记“。” ...

我找到了Angular - pass pipe as variable 帖子，但我不知道如何在我的情况下完成这项工作。此外，该答案中使用的get 方法已被弃用，这只会增加更多的混乱。

如何从变量中使用该管道？

【问题讨论】：

标签： angular typescript angular-pipe

【解决方案1】：

自定义管道呢？你可以在你的管道中实现这个参数逻辑，你的 html 看起来像这样：

<span *ngIf="element.pipe">{{ row[element.column] | myCustomPipe: element.customPipeParams }}</span>

您应该做的就是正确实施 myCustomPipe，当然您可以在其中重用现有的角管道，例如。日期管道。

【讨论】：

我推荐这种方式，只有当你想使用的不仅仅是日期管道。否则，您需要按照@profanis 所说的去做
就是这样。我忘了提到会有不同的管道，而不仅仅是日期 - 这就是为什么所有管道信息都在对象中传递。问题是 - 实现myCustomPipe 的正确方法会是什么样子？在问题中，我提供了一个链接，但我不知道如何根据我的需要进行调整。
@Pipe({ name: 'myCustomPipe' }) export class MyCustomPipe implements PipeTransform { // Inject what you need constructor(private datePipe: DatePipe) { } transform(value: any, args?: string): any { if (args.includes['date']) { return this.datepipe.transform(value, 'yyyy-MM-dd'); } else if (args.includes('...')) { ... } }
或：gist.github.com/marcellkiss/24ff6b49f28622b30d043d2fef7c412b
感谢您的要点，但我想知道如何将其概括到足以应用我需要的任何管道，而不仅仅是日期？

【解决方案2】：

在这里，您以不正确的方式使用管道。首先你的管道文件应该有如下代码：

@Pipe({
    name: 'customDate'
})
export class CustomDateFormat extends DatePipe implements PipeTransform {
    transform(value: any, args?: string): any {
        let formatter;
        switch (args) {
            case 'PIPE_DATE_FORMAT ':
                {
                    formatter = super.transform(value, 'yyyy-MM-dd');
                    break;
                }
        
                
            default:
                {
                    formatter = super.transform(value, 'dd/mm');
                    break;
                }
        }
        return formatter;
    }
}

你的变量应该有这样的值：

{
  column: 'productExpirationDate', 
  caption: 'Product expiration date', 
  pipe: 'customDate: PIPE_DATE_FORMAT ' 
},

你的 html 应该被替换为：

<span *ngIf="element.pipe">{{ row[element.column] | element.pipe }}</span>

【讨论】：

问题是我在对象参数中传递了所有管道信息，因为会有很多不同的管道，我需要它可重用。我需要将所有内容作为pipe 传递并稍后解决。此外，像 pipe: 'customDate: PIPE_DATE_FORMAT ' 这样的管道格式将不起作用，因为 PIPE_DATE_FORMAT 像字符串而不是变量一样工作
因此您可以在 customPipe 中使用的开关中添加更多案例。根据字符串传递，将选择格式。因此，在这里您的用例将得到满足，因为您只需将字符串传递给对象参数。所有的逻辑都将在 customPipe 中解决。
如果有其他管道假设您将管道名称保留为 myPipe 那么您只需传递 pipe:'myPipe' 即可应用。

【解决方案3】：

您可以在变量中使用日期格式并直接在模板中使用它

如下：

const PIPE_DATE_FORMAT = 'yyyy-MM-dd'

{
    column: 'productExpirationDate', 
    caption: 'Product expiration date', 
},

<span >{{ row[element.column] | date:PIPE_DATE_FORMAT }}</span>

【讨论】：