Question

我将创建一个关于我的真实世界问题的简化示例，所以假设我有一个列出对象的组件。

它需要输入@Input() objects: Object[]和@Input label: Function，以便它可以为每个objects输出标记，每个label的返回值为label。< / p>

id + title应该是一个创建字符串的函数，具体取决于对象，以便子组件在呈现每个对象时尽可能灵活。与"This is item " + number或"item " + title + " costs " + cost + "$"或label ...

相同

实用的e => e.id + ': ' + e.title可以是e label objects的参数是label的相应项

现在我想在另一个组件的模板A中使用这个组件B而不将label函数添加到A的组件类中，因为这会使A的组件类混乱很多。我想在模板中定义<my-selector [objects]="myObjects" [label]="e => e.id + ': ' + e.title"函数，例如与

Bindings cannot contain assignments

但无论我尝试哪种符号，有角度似乎都会因为Thread 34 "python2" received signal SIGSEGV, Segmentation fault. [Switching to LWP 13754] 0x00007ffff7dc52f5 in sem_timedwait () from /lib/ld-musl-x86_64.so.1 (gdb) bt #0 0x00007ffff7dc52f5 in sem_timedwait () from /lib/ld-musl-x86_64.so.1 #1 0x0000000000000000 in ?? ()之类的错误而阻止这种情况......

问题：这有可能实现，如果没有，解决这个问题的最佳方法是什么？

Answer 1

无法明确定义模板中的函数，但您可以在组件类中定义它：

constructLabel(e): string {
    console.log('Constructing label...');
    return e.id + ': ' + e.title;
};

绑定指针：

[constructLabel]="constructLabel"

并在子组件中调用它：

export class ChildComponent implements AfterViewInit {

    @Input() constructLabel: Function;

    constructor() { }

    ngAfterViewInit() {
        let e = {};
        this.constructLabel(e); // => Constructing label...
    }
}

Answer 2

据我所知，目前无法在Angular 2模板中定义函数。所以你必须在组件中定义函数

constructLabel(e): string {
  return e.id + ': ' + e.title;
};

并通过

传递

[label]="constructLabel"

Angular 2模板：定义回调

2 个答案: