在Angular2+中，如何用自己的组件替换<tr>而不影响dom结构/css？

<table>
  <tbody>
    <ng-container *ngFor="let item of items">
      <tr>
        <ng-container *ngTemplateOutlet="customRowTemplate; context: { $implicit: item }"></ng-container>
      </tr>
    </ng-container>
  </tbody>
</table>

<ng-template #customRowTemplate let-item>
  <app-custom-row [data]="item"></app-custom-row>
</ng-template>

import { Component, ViewChild, TemplateRef } from '@angular/core';

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent {
  @ViewChild('customRowTemplate') customRowTemplate: TemplateRef<any>;
  items: any[] = [
    { name: 'Item 1', value: 10 },
    { name: 'Item 2', value: 20 },
    { name: 'Item 3', value: 30 }
  ];
}