Angular2: bir bileşeni sarmalama etiketi olmadan oluşturma

Bunu yapmanın bir yolunu bulmakta zorlanıyorum. Bir üst bileşende, şablon a tableve theadelemanını açıklar , ancak tbodybunu başka bir bileşene oluşturan temsilciler şunun gibi:

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

Her myResult bileşeni tr, temelde şu şekilde kendi etiketini oluşturur:

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

Bunu doğrudan üst bileşene koymamamın nedeni (bir myResult bileşenine olan ihtiyacı ortadan kaldırarak) myResult bileşeninin aslında burada gösterilenden daha karmaşık olmasıdır, bu nedenle davranışını ayrı bir bileşene ve dosyaya koymak istiyorum.

Ortaya çıkan DOM kötü görünüyor. Bunun geçersiz olmasından kaynaklandığına inanıyorum, çünkü tbodyyalnızca tröğeleri içerebiliyor (MDN'ye bakın) , ancak oluşturulan (basitleştirilmiş) DOM'm:

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

Aynı şeyi sarmalama <my-result>etiketi olmadan ve yine de bir tablo satırının işlenmesinden tek sorumlu olarak bir bileşen kullanırken oluşturmanın bir yolu var mı?

Ben baktım ng-content, DynamicComponentLoader, ViewContainerRefama bildiğim kadarıyla gördüğünüz gibi bu bir çözüm sağlamak için görünmüyor.

Öznitelik seçicilerini kullanabilirsiniz

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

ve sonra onu gibi kullan

<td myTd></td>

"ViewContainerRef" e ihtiyacınız var ve sonuç bileşenimin içinde şuna benzer bir şey yapın:

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

yeni css kullanmayı deneyebilirsiniz display: contents

işte benim araç çubuğu scss'im:

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

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

ve kullanımda:

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

Bu yönergeyi öğenizde kullanı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);
   }
}

Örnek kullanım:

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

ve ana html'de her zamanki gibi kart öğesini çağırırsınız, örneğin:

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

Çıktı şu şekilde olacaktır:

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

Öznitelik seçiciler bu sorunu çözmenin en iyi yoludur.

Yani senin durumunda:

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

sonuçlarım 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() {
  }

}

sonuçlarım html

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

sonucum 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() {
  }

}

sonucum html

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

Çalışma stackblitz'e bakın: https://stackblitz.com/edit/angular-xbbegx

Günümüzde bir başka seçenek ContribNgHostModulede @angular-contrib/commonpaketten temin edilebilir .

Modülü içe aktardıktan sonra ekleyebilir host: { ngNoHost: '' }sizin için @Componentdekoratör ve hiçbir sarma elemanı hale getirilir.