Использование @Component в качестве @Directive: ошибка lint - PullRequest
Новая
       33

Использование @Component в качестве @Directive: ошибка lint

1 голос
/ 27 марта 2019

Я хочу использовать @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>

Я не получаю ошибок от ворса, но мне это кажется очень странным, и я теряю стиль строк.

Какое будет возможное решение?

Спасибо!

Ответы [ 2 ]

1 голос
/ 27 марта 2019

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

Незабудьте добавить вашу директиву в массив объявлений в NgModule .

1 голос
/ 27 марта 2019

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

...