Доступ к переменной шаблона внутри компонента
У меня возникла проблема с ng-template.
Мы передаем некоторые параметры через ngTemplateOutletContext, как показано ниже, в компоненте таблицы. Мы используем разные средства визуализации для ячеек в зависимости от типа данных, содержащихся внутри. Обратите внимание на параметр cellvalue, поскольку это то, что мне нужно.
<ng-container *ngIf = "useCellRenderer(column, row)">
<ng-template [ngTemplateOutlet] = "column.renderer.templateref" [ngTemplateOutletContext] = "{ cellvalue: row[column.attr], rowvalue:row }">
</ng-template>
</ng-container>
Шаблон компонента, отвечающего за рендеринг, выглядит следующим образом:
<ng-template #templateRef let-cellvalue = "cellvalue" let-rowvalue = "rowvalue">
{{ getTraslateValue(cellvalue)}}
</ng-template>
Шаблон может получить доступ к параметру cellvalue и правильно вызвать функцию, но я хочу получить доступ к тому же параметру из TS компонента и, похоже, не могу это сделать.
То, что я пробовал до сих пор, соответствует следующему фрагменту
@ViewChild('templateRef', { read: TemplateRef })
public templateref: TemplateRef<any>;
ngAfterViewInit() {
console.info('ngAfterViewInit', this.templateref.elementRef);
}
Но в console.info нигде нет значения ячейки.
Заранее спасибо!
Нет, никаких ошибок, просто нет возможности получить доступ к нужным мне данным.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Хорошо, это не ответ, а просто предложение, поэтому, пожалуйста, не игнорируйте его, если это не сработает.
Вы пробовали что-то подобное?
html
<ng-template #cellValue = "cellvalue" let-cellvalue = "cellvalue" let-rowvalue = "rowvalue">
{{ getTraslateValue(cellvalue)}}
</ng-template>
ts
@ViewChild('cellValue') public cellValue: any;
Я не уверен, что это сработает, потому что такие конструкции, как #cellValue = "cellvalue", работают только с директивами, которые имеют описание exportAs в своих декораторах.
Это не сработает:
@ViewChild('templateRef', { read: TemplateRef })
public templateref: TemplateRef<any>;
потому что он ссылается на сам шаблон, а не на сгенерированную часть dom. Может быть, попробуйте сослаться на часть dom, созданную шаблоном.
Я пойду и попробую это.
Как вы сказали, ваше первое решение не сработает, потому что это не директива exporAs. Я пробовал получить такой доступ и возвращает undefined: HTML <ng-template #templateRef let-cellvalue = "cellvalue" let-rowvalue = "rowvalue"> <div #test>test</div> {{ getTraslateValue(cellvalue)}} </ng-template> TS @ViewChild('test', { read: TemplateRef }) public cellValue: any; ngAfterViewInit() { console.info(this.cellValue); } Извините за форматирование кода: S
вы всегда можете создать директиву с помощью exportAs, присвоить ей значение ячейки, а затем ссылаться на нее, как это сделал я.
также не считывайте TemplateRef объекта, который не является шаблоном, прочтите ViewContainerRef или ElementRef.
Далее я попробую использовать директивный подход и расскажу, как все прошло. Спасибо за помощь, Себ!
Итак, @SebOlens привел меня к решению тем, что он сказал. Я закончил создание директивы с помощью exportAs. Директива выглядит следующим образом:
TS
@Directive({ selector: '[exposeVariable]', exportAs: 'exposed' })
export class ExposeVariableDirective {
@Input() variablesToExpose: any;
}
}
Его можно использовать в шаблоне, например, следующим образом:
HTML
<ng-template #templateRef let-cellvalue = "cellvalue" let-rowvalue = "rowvalue">
<div exposeVariable [variablesToExpose] = "{cellValue: cellvalue}" #exposedRef = "exposed">
{{ getTraslateValue(cellvalue)}}
</div>
</ng-template>
И значение ячейки можно получить из компонента:
TS
@ViewChild('exposedRef') public directiveExposed: any;
В моем случае директива начинается после AfterViewInit компонента, поэтому, если вы попытаетесь инициализировать что-то, вам придется либо посмотреть значение переменной ViewChild, либо, в моем случае, я активировал компонент с помощью ngIf и открытой переменной. из шаблона, чтобы я мог использовать хуки из нового компонента.
Еще раз спасибо @SebOlens :)
Рад, что получилось :) Не забудьте проголосовать за ответ
Готово, извини забыл :)
любые ошибки в консоли