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

在Angular2+中，可以使用Angular的结构指令（structural directive）来替换<tr>元素而不影响DOM结构和CSS。结构指令是Angular中的一种特殊指令，用于操作DOM结构。

要用自己的组件替换<tr>元素，可以使用ng-container和ngTemplateOutlet指令的组合。具体步骤如下：

在HTML模板中，使用ng-container元素包裹需要替换的<tr>元素，同时给ng-container添加一个结构指令，比如ngFor。
在ng-container内部，使用ngTemplateOutlet指令来引用自定义组件的模板。
在组件类中，定义一个模板引用变量，用于引用自定义组件的模板。
在组件类中，使用@ViewChild装饰器来获取模板引用变量的实例。
在组件类中，使用ngTemplateOutletContext属性来传递上下文数据给自定义组件的模板。

下面是一个示例代码：

HTML模板：

<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 }
  ];
}

在上面的示例中，ng-container使用ngFor结构指令遍历items数组，然后使用ngTemplateOutlet指令引用了自定义组件的模板。通过ngTemplateOutletContext属性，将当前遍历的item对象传递给自定义组件的模板。

这样，<tr>元素就被自定义组件替换了，而不会影响DOM结构和CSS。你可以根据实际情况修改示例代码中的自定义组件名称和数据结构。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）、腾讯云云数据库MySQL版、腾讯云对象存储（COS）等。你可以通过腾讯云官网（https://cloud.tencent.com/）了解更多关于这些产品的详细信息。