Angular2: merender komponen tanpa tag pembungkusnya

Saya berjuang untuk menemukan cara untuk melakukan ini. Dalam komponen induk, template mendeskripsikan a tabledan theadelemennya, tetapi mendelegasikan rendering tbodyke komponen lain, seperti ini:

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

Setiap komponen myResult membuat trtagnya sendiri , pada dasarnya seperti ini:

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

Alasan saya tidak meletakkan ini secara langsung di komponen induk (menghindari kebutuhan akan komponen myResult) adalah karena komponen myResult sebenarnya lebih rumit daripada yang ditampilkan di sini, jadi saya ingin meletakkan perilakunya dalam komponen dan file terpisah.

DOM yang dihasilkan terlihat buruk. Saya yakin ini karena tidak valid, karena tbodyhanya dapat berisi trelemen (lihat MDN) , tetapi DOM yang saya buat (disederhanakan) adalah:

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

Apakah ada cara kita bisa mendapatkan hal yang sama diberikan, tetapi tanpa pembungkus <my-result> tag , dan saat masih menggunakan komponen untuk menjadi satu-satunya yang bertanggung jawab untuk merender baris tabel?

Saya telah melihat ng-content, DynamicComponentLoader, yang ViewContainerRef, tetapi mereka tampaknya tidak memberikan solusi untuk ini sejauh yang saya bisa melihat.

Anda dapat menggunakan pemilih atribut

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

dan kemudian gunakan seperti itu

<td myTd></td>

Anda memerlukan "ViewContainerRef" dan di dalam komponen hasil-saya melakukan sesuatu seperti ini:

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);
  }

Gunakan arahan ini di elemen Anda

@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);
   }
}

Contoh penggunaan:

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

dan di html induk Anda memanggil elemen kartu seperti biasa, misalnya:

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

Outputnya adalah:

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

Pemilih atribut adalah cara terbaik untuk mengatasi masalah ini.

Jadi dalam kasus Anda:

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

hasil saya 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 hasil-saya

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

hasil saya 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 hasil saya

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

Lihat stackblitz yang berfungsi: https://stackblitz.com/edit/angular-xbbegx

Anda dapat mencoba menggunakan css baru display: contents

inilah scss toolbar saya:

: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;
}

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

dan sedang digunakan:

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

Pilihan lain saat ini adalah yang ContribNgHostModuledisediakan dari @angular-contrib/commonpaket .

Setelah mengimpor modul, Anda dapat menambahkan host: { ngNoHost: '' }ke @Componentdekorator Anda dan tidak ada elemen pembungkus yang akan dirender.