Оценить выражение дважды в угловых

Question

Я пытаюсь оценить выражение, исходящее из одного компонента внутри другого компонента.

Ниже приведен код

Parent.component.ts

parentData: any= {
    name: 'xyz',
    url: '/test?testid={{element["TestId"]}}'
};

Parent.component.html

<child [data]="parentData"></child>

child.component.ts

@Component({ 
selector:'child'
...
})
export class ChildComponent {
    @Input() data: any;
}

child.component.html

<td mat-cell *matCellDef="let element">
    <a href="{{data.url}}">{{element["TestName"]}}</a>
</td>

Href оценивается как /test?testid={{element["TestId"]}}. Это должно быть /test?testid=123

element["TestId"] - is to be evaluated in child scope.

Я нашел эту ссылку , но я не уверен, как я могу применить ее в моем случае.

EDIT: Добавление ссылки для StackBlitz содержит аналогичный пример. Я пытаюсь сделать свой ChildComponent универсальным, поэтому хочу, чтобы родитель решал, какой столбец оценивать для element["TestId"] Пожалуйста, игнорируйте мои изменения, я все еще учусь тому, как лучше написать вопрос.

Answer 1

Вы можете создать функцию из этого свойства

parentGridData = {
  ...
  url: element => `http://www.google.com/searchText=${element["name"]}`
};

и затем передать ей соответствующий аргумент:

<a href="{{gridData?.url(element)}}">

Но убедитесь, что ваша функция не содержит сложных вычислений.

Разветвленный стек-блиц