如何使用 jquery 访问 ng-template 属性答案

【问题标题】：how to access ng-template attribute with jquery如何使用 jquery 访问 ng-template 属性
【发布时间】：2021-02-18 04:39:48
【问题描述】：

我正在使用带有自定义模板的角度日历，如下所示：https://mattlewis92.github.io/angular-calendar/#/custom-templates

我的 html 中有 ng-template 元素

<ng-template #customCellTemplate let-day="day" let-viewDate="event"let-locale="locale" [let-status]="statuses">

并在我的 mwl-calendar-month-view 元素中调用 customCellTemplate

  <mwl-calendar-month-view [viewDate]="viewDate" [events]="events"   (eventClicked)="handleEvent('Clicked', $event.event)"
    [cellTemplate]="customCellTemplate">
  </mwl-calendar-month-view>

现在我想在我的 component.ts 文件中访问 day（在 ng-template - let-day="day" 中）

我想我可以用 jquery 做到这一点，但不知道怎么做，如果还有其他方法，请告诉我

谢谢！！

【问题讨论】：

将 Angular 与 JQuery 混合通常不是一个好主意。几乎所有可以用 JQuery 完成的事情都可以直接用 Angular 完成。究竟为什么要访问 component.ts 文件中的元素？
我想为此访问 day 属性..(stackoverflow.com/questions/64675233/…) 目的。

标签： javascript angular typescript angular-calendar

【解决方案1】：

您可以使用 ViewChild 指令来访问该元素。然后您可以记录它以查看所有可用信息。

export class AppComponent implements AfterViewInit {
  @ViewChild('customCellTemplate') customCellTemplate : TemplateRef;
  ngAfterViewInit() {
    console.log(customCellTemplate);
  }
}

我认为这种方式可以让您访问这些参数。

【讨论】：

感谢@eloyra，它控制了整个模板，但我在任何地方都找不到 day。如何访问 day attr？？
也许您需要将您定义为 ng-template 的内容抽象为组件。这样，那些 let-name 变量可能只是标准的 @Input 参数。
你能告诉我怎么做吗？
检查this。您基本上使用标准 HTML 创建一个 .html 和一个带有特殊装饰器的 .ts ，该装饰器指示您正在定义一个组件并将 HTML 和标签名称分配给该组件。在这个 .ts 文件中，您可以定义所有您想要的逻辑和access @Input parameters。最后，在您现在使用 ng-template 的地方，您只需放置自定义组件标签，比如（组件不能自行关闭）。跨度>