admin 管理员组

文章数量: 1086019

I have an angular 19 application and components app-dashboard, app-table. I'm also using PrimeNG components and i want to project ng-template into app-table component:

@Component({
  selector: 'app-table',
  imports: [Skeleton, TableModule, NgTemplateOutlet],
  template: `
    <p-table>
      <ng-template let-row let-rowIndex="rowIndex" pTemplate="body">
       <ng-container
          [ngTemplateOutlet]="bodyCtx()"
          [ngTemplateOutletContext]="{ $implicit: row, rowIndex }"
        />
      </ng-template>
    </p-table>

  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TableComponent<T> {
  public readonly bodyCtx = contentChild.required<TemplateRef<unknown>>('body');
}

@Component({
  selector: 'app-dashboard',
  imports: [
    TableComponent,
  ],
  template: `
    <app-table>
      <ng-template #body let-row let-rowIndex="rowIndex">
        <tr>
          <td>{{ row.name || '-' }}</td>
        </tr>
      </ng-template>
    </app-table>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DashboardComponent {}

But for some reason an error occurs:

ERROR NullInjectorError: R3InjectorError(Standalone[_DashboardComponent])[_Table -> _Table -> _Table]: 
  NullInjectorError: No provider for _Table!

What's wrong? Should i provide something else?

I have an angular 19 application and components app-dashboard, app-table. I'm also using PrimeNG components and i want to project ng-template into app-table component:

@Component({
  selector: 'app-table',
  imports: [Skeleton, TableModule, NgTemplateOutlet],
  template: `
    <p-table>
      <ng-template let-row let-rowIndex="rowIndex" pTemplate="body">
       <ng-container
          [ngTemplateOutlet]="bodyCtx()"
          [ngTemplateOutletContext]="{ $implicit: row, rowIndex }"
        />
      </ng-template>
    </p-table>

  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TableComponent<T> {
  public readonly bodyCtx = contentChild.required<TemplateRef<unknown>>('body');
}

@Component({
  selector: 'app-dashboard',
  imports: [
    TableComponent,
  ],
  template: `
    <app-table>
      <ng-template #body let-row let-rowIndex="rowIndex">
        <tr>
          <td>{{ row.name || '-' }}</td>
        </tr>
      </ng-template>
    </app-table>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DashboardComponent {}

But for some reason an error occurs:

ERROR NullInjectorError: R3InjectorError(Standalone[_DashboardComponent])[_Table -> _Table -> _Table]: 
  NullInjectorError: No provider for _Table!

What's wrong? Should i provide something else?

  • html
  • angular
  • typescript
  • primeng
  • angular-signals
Share Improve this question asked Mar 28 at 11:08 TalVik99TalVik99 1981 silver badge13 bronze badges 1
  • please replicate the error on stackblitz, please use the primeng stackblitz examples to replicate – Naren Murali Commented Mar 28 at 11:57
Add a comment  | 

1 Answer 1

Reset to default 0

You will have to set "standalone: true" inside the @Component decorator. It should look something like this.

@Component({
  selector: 'app-table',
  standalone: true, // add this
  imports: [Skeleton, TableModule, NgTemplateOutlet],
  template: `
    <p-table>
      <ng-template let-row let-rowIndex="rowIndex" pTemplate="body">
       <ng-container
          [ngTemplateOutlet]="bodyCtx()"
          [ngTemplateOutletContext]="{ $implicit: row, rowIndex }"
        />
      </ng-template>
    </p-table>

  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TableComponent<T> {
  public readonly bodyCtx = contentChild.required<TemplateRef<unknown>>('body');
}

import { Component, TemplateRef } from '@angular/core';
import { TableComponent } from './tableponent';

@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [TableComponent],
  template: `
    <app-table>
      <ng-template #body let-row let-rowIndex="rowIndex">
        <tr>
          <td>{{ row.name || '-' }}</td>
        </tr>
      </ng-template>
    </app-table>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DashboardComponent {}

本文标签： htmlTrying to project ngtemplate into componentStack Overflow

版权声明：本文标题：html - Trying to project ng-template into component - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744041493a2523337.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。