কৌণিক 2: এর মোড়ক ট্যাগ ছাড়াই কোনও উপাদান সরবরাহ করুন

Question 1

আমি এটি করার জন্য একটি উপায় খুঁজতে লড়াই করছি। কোনও প্যারেন্ট উপাদানগুলিতে টেমপ্লেটটি একটি 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>

প্রতিটি মাইআরসাল্ট উপাদান তার নিজস্ব trট্যাগটি রেন্ডার করে , মূলত:

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

যেহেতু আমি এটি সরাসরি প্যারেন্ট উপাদানগুলিতে রাখছি না (মাইআরসাল্ট উপাদানটির প্রয়োজনীয়তা এড়ানো) এটি হ'ল মাইআরসাল্ট উপাদানটি এখানে দেখানো থেকে বেশি জটিল, তাই আমি এর আচরণটি একটি পৃথক উপাদান এবং ফাইলে রাখতে চাই।

ফলস্বরূপ DOM দেখতে খারাপ দেখাচ্ছে। আমি বিশ্বাস করি এটি কারণ এটি অবৈধ, কারণ এতে tbodyকেবল trউপাদান থাকতে পারে (এমডিএন দেখুন) তবে আমার উত্পন্ন (সরলীকৃত) ডিওএম হ'ল:

<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, কিন্তু তারা যতটা দেখতে পাচ্ছি এই একটি সমাধান প্রদান মনে হচ্ছে না।

Question 2

আপনি বৈশিষ্ট্য নির্বাচনকারী ব্যবহার করতে পারেন

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

এবং তারপরে এটি ব্যবহার করুন

<td myTd></td>

Question 3

আপনার "ভিউ কনটেনারআরফ" দরকার এবং আমার ফলাফলের উপাদানটির ভিতরে এটির মতো কিছু করুন:

এইচটিএমএল:

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

Question 4

আপনি নতুন সিএসএস ব্যবহার করার চেষ্টা করতে পারেন display: contents

এখানে আমার সরঞ্জামদণ্ডের এসএসএস:

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

এবং এইচটিএমএল:

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

Question 5

এই উপাদানটি আপনার উপাদানটিতে ব্যবহার করুন

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

এবং প্যারেন্ট এইচটিএমএলে আপনি যথারীতি কার্ড উপাদান কল করেন, উদাহরণস্বরূপ:

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

আউটপুটটি হবে:

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

Question 6

বৈশিষ্ট্য নির্বাচনকারীরা এই সমস্যাটি সমাধানের সেরা উপায়।

সুতরাং আপনার ক্ষেত্রে:

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

}

আমার ফলাফল এইচটিএমএল

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

আমার ফলাফল 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() {
  }

}

আমার ফলাফল এইচটিএমএল

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

কার্যকারী স্ট্যাকব্লিটজ দেখুন: https://stackblitz.com/edit/angular-xbbegx

Question 7

আজকাল আর একটি বিকল্প প্যাকেজContribNgHostModule থেকে উপলব্ধ করা হয় ।@angular-contrib/common

মডিউলটি আমদানির পরে host: { ngNoHost: '' }আপনি আপনার @Componentডেকরেটারে যুক্ত করতে পারবেন এবং কোনও মোড়কের উপাদান রেন্ডার করা হবে না।