Угловые шаблоны 2: определение обратного вызова

Я создам упрощенный пример моей реальной проблемы, поэтому, допустим, у меня есть компонент, который перечисляет объекты.Угловые шаблоны 2: определение обратного вызова

Он принимает входной сигнал @Input() objects: Object[] и @Input label: Function, так что он может вывести наружу разметку для каждого из objects, имеющих возвращаемого значения label для каждого из них.

label должен быть функцией создания строки и в зависимости от объекта, чтобы дочерний компонент был максимально гибким в том, как он представляет каждый объект. Как id + title или "This is item " + number или "item " + title + " costs " + cost + "$" ...

label Практическая может быть e => e.id + ': ' + e.title где e (аргумент для label является соответствующий элемент objects)

Теперь я хотел бы использовать этот компонент В рамках другого компонента шаблон A без добавления функции label к классу компонентов A, потому что это значительно усложнит класс компонентов A. Я хотел бы определить функцию label в шаблоне, например. с

<my-selector [objects]="myObjects" [label]="e => e.id + ': ' + e.title"

Но независимо от того, который нотации я стараюсь, угловатый, кажется, обескуражить это с ошибками, как Bindings cannot contain assignments и тому подобное ...

Вопрос: ли это можно достичь, и если нет, то есть лучший подход к решению этого?

источник

2017-01-16 Conic

просто создать функцию и передать эту функцию вместо 'е => e.id +«:»+ е .title' – Maxime

Почему вы передаете функции в качестве входных данных для дочерних компонентов? Как показано выше, 'label' является функцией. Рекомендуется передавать значения в качестве входных данных. Если вы хотите получить доступ к функции в дочернем компоненте, вы всегда можете сделать это, используя экземпляр этого дочернего компонента. – koech

Я хочу сделать это, потому что дочерний компонент должен быть гибким в том, как он отображает объекты. Я соответствующим образом обновил этот вопрос. – Conic

Там нет никакого способа определить функцию в шаблоне в явном виде, но вы можете определить его в классе компонентов:

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... 
    } 
}

источник

2017-01-16 12:09:10

Я добавил объяснение, почему он должен быть функцией, и ваше второе решение работает, конечно, но я сказал, что я не хочу загромождать компонент дополнительными функциями и вместо этого определять его непосредственно в шаблоне. Поэтому мой вопрос касается того, возможно ли это, не добавляя функцию в класс компонента. – Conic

Невозможно определить функцию внутри шаблона, также я не вижу действительной причины для этого.Однако, если вам нужно выполнить функцию в дочернем компоненте, вы можете определить ее в своем родительском компоненте и связать указатель в шаблоне. Я обновляю свой ответ, демонстрируя это. –

Итак, правильный ответ на мой вопрос «Можно ли достичь, а если нет, то какой лучший подход к решению этого?» Будет «Нет, это не так, и лучшим решением является запись функции в компоненте». Спасибо, и я приму ваш ответ, если вы обновите соответствующим образом. – Conic

Насколько я вижу, в настоящее время невозможно определить функционал n внутри шаблона Angular 2. Таким образом, вы должны определить функцию в компоненте

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

и передать его через

[label]="constructLabel"

источник

2017-01-16 12:49:58 Conic

Угловые шаблоны 2: определение обратного вызова

ответ

Смежные вопросы