Блог

Я хочу использовать @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, но для меня это выглядит действительно странно, и я теряю стиль строк.

Какое было бы возможным решением?

Спасибо!

Да, вы можете добавлять 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>
  

Это приводит к:
Бла-Бла-бла, я текст внутри div

Не забудьте добавить свою директиву в массив declarations в NgModule.

просто используйте selector: 'tr[my-tag]' . С помощью таких селекторов вы определяете свои конкретные tr s