Angular2: hiển thị một thành phần không có thẻ gói của nó

Tôi đang đấu tranh để tìm ra một cách để làm điều này. Trong thành phần mẹ, mẫu mô tả a tablevà theadphần tử của nó , nhưng ủy quyền hiển thị tbodythành phần khác, như thế này:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Time</th>
    </tr>
  </thead>
  <tbody *ngFor="let entry of getEntries()">
    <my-result [entry]="entry"></my-result>
  </tbody>
</table>

Mỗi thành phần myResult hiển thị trthẻ riêng của nó , về cơ bản như vậy:

<tr>
  <td>{{ entry.name }}</td>
  <td>{{ entry.time }}</td>
</tr>

Lý do tôi không đặt điều này trực tiếp trong thành phần mẹ (tránh sự cần thiết phải có thành phần myResult) là thành phần myResult thực sự phức tạp hơn được hiển thị ở đây, vì vậy tôi muốn đặt hành vi của nó trong một thành phần và tệp riêng biệt.

DOM kết quả trông xấu. Tôi tin rằng điều này là do nó không hợp lệ, vì tbodychỉ có thể chứa trcác phần tử (xem MDN) , nhưng DOM được tạo (đơn giản hóa) của tôi là:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Time</th>
    </tr>
  </thead>
  <tbody>
    <my-result>
      <tr>
        <td>Bob</td>
        <td>128</td>
      </tr>
    </my-result>
  </tbody>
  <tbody>
    <my-result>
      <tr>
        <td>Lisa</td>
        <td>333</td>
      </tr>
    </my-result>
  </tbody>
</table>

Có cách nào để chúng ta có thể hiển thị cùng một thứ, nhưng không có <my-result>thẻ gói và trong khi vẫn sử dụng một thành phần chịu trách nhiệm duy nhất cho việc hiển thị một hàng trong bảng không?

Tôi đã xem xét ng-content, DynamicComponentLoaderthì ViewContainerRef, nhưng họ dường như không cung cấp một giải pháp này như xa như tôi có thể nhìn thấy.

Bạn có thể sử dụng bộ chọn thuộc tính

@Component({
  selector: '[myTd]'
  ...
})

và sau đó sử dụng nó như

<td myTd></td>

Bạn cần "ViewContainerRef" và bên trong thành phần kết quả của tôi thực hiện một số việc như sau:

html:

<ng-template #template>
    <tr>
       <td>Lisa</td>
       <td>333</td>
    </tr>
 </ng-template>

ts:

@ViewChild('template') template;


  constructor(
    private viewContainerRef: ViewContainerRef
  ) { }

  ngOnInit() {
    this.viewContainerRef.createEmbeddedView(this.template);
  }

Sử dụng chỉ thị này trên phần tử của bạn

@Directive({
   selector: '[remove-wrapper]'
})
export class RemoveWrapperDirective {
   constructor(private el: ElementRef) {
       const parentElement = el.nativeElement.parentElement;
       const element = el.nativeElement;
       parentElement.removeChild(element);
       parentElement.parentNode.insertBefore(element, parentElement.nextSibling);
       parentElement.parentNode.removeChild(parentElement);
   }
}

Ví dụ sử dụng:

<div class="card" remove-wrapper>
   This is my card component
</div>

và trong html mẹ, bạn gọi phần tử thẻ như bình thường, ví dụ:

<div class="cards-container">
   <card></card>
</div>

Đầu ra sẽ là:

<div class="cards-container">
   <div class="card" remove-wrapper>
      This is my card component
   </div>
</div>

Bộ chọn thuộc tính là cách tốt nhất để giải quyết vấn đề này.

Vì vậy, trong trường hợp của bạn:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Time</th>
    </tr>
  </thead>
  <tbody my-results>
  </tbody>
</table>

kết quả của tôi ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-results, [my-results]',
  templateUrl: './my-results.component.html',
  styleUrls: ['./my-results.component.css']
})
export class MyResultsComponent implements OnInit {

  entries: Array<any> = [
    { name: 'Entry One', time: '10:00'},
    { name: 'Entry Two', time: '10:05 '},
    { name: 'Entry Three', time: '10:10'},
  ];

  constructor() { }

  ngOnInit() {
  }

}

html kết quả của tôi

  <tr my-result [entry]="entry" *ngFor="let entry of entries"><tr>

kết quả của tôi ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: '[my-result]',
  templateUrl: './my-result.component.html',
  styleUrls: ['./my-result.component.css']
})
export class MyResultComponent implements OnInit {

  @Input() entry: any;

  constructor() { }

  ngOnInit() {
  }

}

html kết quả của tôi

  <td>{{ entry.name }}</td>
  <td>{{ entry.time }}</td>

Xem stackblitz đang hoạt động: https://stackblitz.com/edit/angular-xbbegx

bạn có thể thử sử dụng css mới display: contents

đây là scss trên thanh công cụ của tôi:

:host {
  display: contents;
}

:host-context(.is-mobile) .toolbar {
  position: fixed;
  /* Make sure the toolbar will stay on top of the content as it scrolls past. */
  z-index: 2;
}

h1.app-name {
  margin-left: 8px;
}

và html:

<mat-toolbar color="primary" class="toolbar">
  <button mat-icon-button (click)="toggle.emit()">
    <mat-icon>menu</mat-icon>
  </button>
  <img src="/assets/icons/favicon.png">
  <h1 class="app-name">@robertking Dashboard</h1>
</mat-toolbar>

và đang sử dụng:

<navigation-toolbar (toggle)="snav.toggle()"></navigation-toolbar>

Một lựa chọn khác hiện nay là được ContribNgHostModuletạo sẵn từ @angular-contrib/commongói .

Sau khi nhập mô-đun, bạn có thể thêm host: { ngNoHost: '' }vào trình @Componenttrang trí của mình và không có phần tử gói nào được hiển thị.