Доступ к переменной шаблона внутри компонента

Question

Я столкнулся с проблемой с 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.log('ngAfterViewInit', this.templateref.elementRef);
  }

Но в консоли нет ни одного значения ячейки. Log

Заранее спасибо!

Answer 1

Итак, @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:)

Answer 2

Хорошо, так что это не ответ, а просто предложение, поэтому, пожалуйста, не отрицайте его, если оно не работает.

Вы пробовали что-то подобное?

HTML

<ng-template #cellValue="cellvalue" let-cellvalue="cellvalue" let-rowvalue="rowvalue">
  {{ getTraslateValue(cellvalue)}}
</ng-template>

ц

@ViewChild('cellValue') public cellValue: any;

Я не уверен, что это сработает, потому что такие конструкции, как #cellValue="cellvalue", работают только с директивами, которые имеют exportAs описание в своих декораторах

Это не сработает:

@ViewChild('templateRef', { read: TemplateRef })
  public templateref: TemplateRef<any>;

потому что он ссылается на сам шаблон, а не на сгенерированную часть dom. Может быть, попробуйте ссылаться на ту часть dom, которая генерируется шаблоном.