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

#angular

#HTML #css #angular #angular-директива #angular-шаблон

Вопрос:

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

 <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.

Буду признателен за любую помощь ..!

1. Если вы сможете настроить Codepen или что-то подобное на рабочем примере вашего приложения, у нас будет гораздо больше шансов помочь вам.

2. селектор: ‘[my-component]’ был правильным. Вы просто забыли написать входные данные1 и Входные данные2.

3. Похоже, ваши правила CSS могут быть слишком специфичными.

4. @omeralper Я добавил @Input() для данных 1 и данных 2, он работает нормально, если я использую <my-component></my-component>, но из-за этих тегов css ломался, поэтому я попробовал использовать тег tr.

5. @AluanHaddad Я использовал bootstrap, это bootstrap css для td, который ломался.

Ответ №1:

вам также необходимо включить 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;
}

Проверьте этот плунжер!!

1. Нет, вам не обязательно также включать ‘tr’. Удалите ‘tr’ и попробуйте, это сработает.

2. Но вы должны включить tr в селектор, поскольку он предназначен только для использования в trs, где еще вы могли бы добавить td? Проясняет ваше намерение и предотвращает ошибки. Просто потому, что это работает, это не значит, что вы должны это делать

3. Это похоже на директиву. На самом деле не развернут. Но есть обходной путь для некоторых проблем. Реальный развернутый компонент должен работать как псевдокомпонент ng-container или ng-template . К сожалению, решение пока не найдено. В некоторых случаях действительно важно иметь компоненты без собственного тега, чтобы повторно использовать код, не нарушая селекторы родительских (например, сторонних фреймворков). например, если у вас есть несколько элементов, и вы не можете их обернуть. Также это решение (селектор атрибутов) не будет работать для такой проблемы. …

4. Еще одна причина добавить tr заключается в том, что если вы динамически создаете компонент (например, с помощью ComponentPortal, он сможет создать его правильно с правильным тегом).