使用@Component作为@Directive：lint错误

Question

我想在表格中使用@Component，但我想我不能使用Angular <tags>在表格的<tr>元素内。我不能使用@Directive因为我想要包含html。我该怎么办？

我在my-page.html中有以下内容：

<tr my-tag SOME_THINGS></tr>

然后，在my-component.ts我有

@Component({
  selector: '[my-tag]',
  templateUrl: './my-tag.html',
  styleUrls: ['./my-tag.scss']
})

在my-component.html我有：

<td>blah blah blah</td>

@Component在tr内部被称为指令，但它不是，因为我想在其中包含一些html。

这引发了以下tslint错误：

组件“my-tag”的选择器应该用作元素（https://angular.io/styleguide#style-05-03）（组件选择器）

如果我执行以下操作：

@Component({
  selector: 'app-my-tag',
  templateUrl: './my-tag.html',
  styleUrls: ['./my-tag.scss']
})

和...一起

<tr><app-my-tag></app-my-tag></tr>

我没有得到lint错误，但它看起来很奇怪，我失去了行的风格。

哪个是可能的解决方案？

谢谢！

Answer 1

是的，您可以从指令中追加html元素。这是如何做：

import { AfterViewInit, Directive, ElementRef, Renderer2 } from '@angular/core';

@Directive({
  selector: '[appTestDir]'
})
export class TestDirective implements AfterViewInit {
  constructor(private elRef: ElementRef, private renderer: Renderer2){}

  ngAfterViewInit(): void {
    const div = this.renderer.createElement('div');
    const divText = this.renderer.createText('I am text inside div');
    this.renderer.appendChild(div, divText);
    this.renderer.appendChild(this.elRef.nativeElement, div);
  }
}

在您的HTML中

<td appTestDir>Blah Blah Blah</td>

这产生：Blah Blah Blah我是div里面的文字

不要忘记将您的指令添加到NgModule中的声明数组中。

Answer 2

只需使用selector: 'tr[my-tag]'。使用此类选择器，您可以定义特定的trs