Angular2: แสดงผลองค์ประกอบโดยไม่มีแท็กตัด

ฉันกำลังดิ้นรนเพื่อหาวิธีทำสิ่งนี้ ในองค์ประกอบหลักแม่แบบจะอธิบายถึง a tableและtheadองค์ประกอบ แต่มอบหมายการแสดงผลtbodyไปยังองค์ประกอบอื่นเช่นนี้:

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

ส่วนประกอบ myResult แต่ละรายการแสดงผลtrแท็กของตัวเองโดยทั่วไปจะเป็นดังนี้:

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

เหตุผลที่ฉันไม่ใส่สิ่งนี้ลงในองค์ประกอบหลักโดยตรง (หลีกเลี่ยงความต้องการส่วนประกอบ myResult) คือจริงๆแล้วคอมโพเนนต์ myResult นั้นซับซ้อนกว่าที่แสดงไว้ที่นี่ดังนั้นฉันจึงต้องการใส่ลักษณะการทำงานในองค์ประกอบแยกต่างหากและไฟล์

DOM ที่ได้นั้นดูไม่ดี ฉันเชื่อว่านี่เป็นเพราะไม่ถูกต้องเนื่องจากtbodyสามารถมีได้เฉพาะtrองค์ประกอบ(ดู MDN)แต่ DOM ที่สร้างขึ้น (แบบง่าย) ของฉันคือ:

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

มีวิธีใดบ้างที่เราสามารถแสดงผลสิ่งเดียวกัน แต่ไม่มี<my-result>แท็กการตัดและในขณะที่ยังคงใช้ส่วนประกอบเพื่อรับผิดชอบในการแสดงผลแถวตาราง

ผมมองที่ng-content, DynamicComponentLoaderที่ViewContainerRef, แต่พวกเขาไม่ได้ดูเหมือนจะให้วิธีแก้ปัญหานี้เท่าที่ผมสามารถมองเห็น

คุณสามารถใช้ตัวเลือกแอตทริบิวต์

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

แล้วใช้มันเช่น

<td myTd></td>

คุณต้องมี "ViewContainerRef" และภายในองค์ประกอบผลลัพธ์ของฉันทำสิ่งนี้:

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

คุณสามารถลองใช้ css ใหม่ display: contents

นี่คือแถบเครื่องมือของฉัน scss:

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

และ 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>

และใช้งาน:

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

ใช้คำสั่งนี้กับองค์ประกอบของคุณ

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

ตัวอย่างการใช้งาน:

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

และใน html หลักคุณเรียกองค์ประกอบการ์ดตามปกติตัวอย่างเช่น:

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

ผลลัพธ์จะเป็น:

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

ตัวเลือกแอตทริบิวต์เป็นวิธีที่ดีที่สุดในการแก้ปัญหานี้

ดังนั้นในกรณีของคุณ:

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

ผลลัพธ์ของฉัน 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 ผลลัพธ์ของฉัน

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

ผลลัพธ์ของฉัน

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 ผลลัพธ์ของฉัน

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

ดูการทำงาน stackblitz: https://stackblitz.com/edit/angular-xbbegx

อีกตัวเลือกหนึ่งในปัจจุบันคือContribNgHostModuleทำใช้ได้จากแพคเกจ@angular-contrib/common

หลังจากนำเข้าโมดูลคุณสามารถเพิ่มhost: { ngNoHost: '' }ไปยัง@Componentมัณฑนากรของคุณได้และจะไม่มีการแสดงองค์ประกอบการตัด