Удалить тег компонента хоста из html в angular 4

У меня есть таблица, в которой я хочу отобразить строку таблицы, которая является компонентом. А также я хочу передать данные этому компоненту:

<table>
    <th>
        <td>col 1</td>
        <td>col 2</td>
        <td>col 3</td>
    </th>
    <tr>
        <my-component [data1]="data1" [data2]="data2"></my-component>
    </tr>
    <tr *ngFor="let item of list">
        {{item}}
    </tr>
</table>

В my-component HTML - это несколько <td></td> с данными, отображаемыми из data1 и data2.

Но после его рендеринга из-за <my-component></my-component> мой CSS ломается, в результате весь my-component HTML (вся строка таблицы) отображается в 1-м столбце.

Результат выше:

<table>
    <th>
        <td>col 1</td>
        <td>col 2</td>
        <td>col 3</td>
    </th>
    <tr>
        <my-component>
            <td>data1.prop1</td>
            <td>data1.prop2</td>
        </my-component>
    </tr>
    <tr *ngFor="let item of list">
        {{item}}
    </tr>
</table>

Я пробовал следующее:

@Component({
    selector: '[my-component]',
    templateUrl: 'my-component.html'
})

<tr my-component [data1]="data1" [data2]="data2"></tr>

Но это приводит к ошибке Can't bind to 'data1' since it isn't a known property of 'tr'.

Также я не могу использовать @Directive, так как хочу отображать HTML.

Как я могу визуализировать шаблон <my-component></my-component> без тега <my-component></my-component>?

Другие ответы относятся к предыдущим версиям angular. Я использую Angular 4.3.4.

Любая помощь будет оценена ..!


angular html css angular-directive angular-template
person AjinkyaBhagwat    schedule 10.10.2017    source источник
comment
Если вы можете настроить Codepen или аналогичный с рабочим примером вашего приложения, у нас будет гораздо больше шансов помочь вам.   -  person Ghassen Louhaichi    schedule 10.10.2017
comment
селектор: '[мой-компонент]' был правильным. Вы просто забыли записать Input data1 и Input data2.   -  person omeralper    schedule 11.10.2017
comment
Похоже, ваши правила CSS могут быть слишком конкретными.   -  person Aluan Haddad    schedule 11.10.2017
comment
@omeralper Я добавил @Input () для данных 1 и данных 2, он работает нормально, если я использую ‹my-component› ‹/my-component›, но из-за этих тегов css ломался, поэтому я попытался использовать тег tr.   -  person AjinkyaBhagwat    schedule 11.10.2017
comment
@AluanHaddad Я использовал bootstrap, это css начальной загрузки для td, который ломался.   -  person AjinkyaBhagwat    schedule 11.10.2017
comment
@GhassenLouhaichi спасибо за предложение!   -  person AjinkyaBhagwat    schedule 11.10.2017

Ответы (1)


arrow_upward
17
arrow_downward

вам нужно также включить tr в селектор, как показано ниже,

@Component({
 selector: 'tr[my-component]',
 template: `
   <td>{{data1.prop1}}</td>
   <td>{{data1.prop2}}</td>
   <td>{{data2.prop1}}</td>
 `
})
export class MyComponent {
  @Input() data1;
  @Input() data2;
}

Проверьте этот Plunker !!

person Madhu Ranjan    schedule 10.10.2017
comment
Нет, вам также не нужно включать "tr". Удалите 'tr' и попробуйте, это сработает. - person omeralper; 11.10.2017
comment
Но вы должны включить tr в селектор, поскольку он предназначен только для использования в trs, где еще вы могли бы добавить td? Делает ваше намерение ясным и предотвращает ошибки. То, что это работает, не означает, что вы должны это делать. - person Juan Mendes; 02.08.2019
comment
Это похоже на директиву. Не совсем развернутый. Но обходной путь для некоторых проблем. Настоящий распакованный компонент должен работать как псевдокомпонент ng-container или ng-template. К сожалению, решение пока не найдено. В некоторых случаях действительно важно иметь компоненты без собственного тега, чтобы повторно использовать код без нарушения селекторов родительских элементов (например, сторонние фреймворки). например если у вас есть несколько элементов, и вы не можете его обернуть. Также это решение (селектор атрибутов) не будет работать для такой проблемы. ... - person Dominik; 14.05.2020
comment
Еще одна причина для добавления tr заключается в том, что если вы создаете компонент динамически (например, с помощью ComponentPortal, он сможет правильно создать его с помощью правильного тега). - person Simon_Weaver; 14.07.2020