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>

我没有收到皮棉错误，但对我来说确实很奇怪，我失去了行的样式。

哪种可能的解决方案？

谢谢！

Answer 1

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

Answer 2

是的，您可以在指令中附加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 中的声明数组。

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

2 个答案: