একাধিক এনজি-সামগ্রী

Question 1

আমি ng-contentকৌণিক 6 এ একাধিক ব্যবহার করে একটি কাস্টম উপাদান তৈরি করার চেষ্টা করছি তবে এটি কাজ করছে না এবং কেন তা আমার কোনও ধারণা নেই।

এটি আমার উপাদান কোড:

<div class="header-css-class">
    <ng-content select="#header"></ng-content>
</div>
<div class="body-css-class">
    <ng-content select="#body"></ng-content>
</div>

আমি অন্য জায়গায় এই উপাদানটি ব্যবহার করতে হবে এবং দুটি ভিন্ন HTML কোড ভিতরে রেন্ডার করার চেষ্টা করছি bodyএবং হেডার selectএর ng-content, ভালো কিছু:

<div #header>This should be rendered in header selection of ng-content</div>
<div #body>This should be rendered in body selection of ng-content</div>

কিন্তু উপাদানটি ফাঁকা উপস্থাপন করছে।

আপনি কি জানেন যে আমি কী ভুল করতে পারি বা একই উপাদানটিতে দুটি পৃথক বিভাগ রেন্ডার করার সবচেয়ে ভাল উপায় কী?

ধন্যবাদ!

Question 2

আপনি ছদ্মবেশী বৈশিষ্ট্য headerএবং bodyটেম্পলেট রেফারেন্সের বিপরীতে যুক্ত করতে পারেন (#header, #body)।
আর ব্যবহার transclude ng-contentসঙ্গে selectমত বৈশিষ্ট্য select="[header]"।

app.comp.html

<app-child>
    <div header >This should be rendered in header selection of ng-content</div>
    <div body >This should be rendered in body selection of ng-content</div>
</app-child>

child.comp.html

<div class="header-css-class">
    <ng-content select="[header]"></ng-content>
</div>
<div class="body-css-class">
    <ng-content select="[body]"></ng-content>
</div>

ডেমো

Question 3

ওয়েব উপাদান চশমা ফিট করতে । এমনকি যদি এটি কৌনিক হয়। এটি নির্বাচনের জন্য কৌণিক নির্দেশাবলী বা অন্য ব্যবহারের সাথে সংরক্ষিত বৈশিষ্ট্যের মতো বৈশিষ্ট্যগুলি এড়ানো সম্পর্কে about সুতরাং, আমরা কেবল "স্লট" বৈশিষ্ট্যটি ব্যবহার করি। আমরা <ng-content select="[slot=foobar]">হিসাবে দেখতে পাবেন <slot name="foobar">।

উদাহরণ:

হ্যালো-ওয়ার্ল্ড ডেস্কটপ

<ng-content select="[slot=start]"></ng-content>
<span>Hello World</span>
<ng-content select="[slot=end]"></ng-content>

app.componal.html

<app-hello-world>
  <span slot="start">This is a </span>
  <span slot="end"> example.</span>
</app-hello-world>

ফলাফল

This is a Hello World example.

স্ট্যাকব্লিটজ উদাহরণ

"কলা" বা "মাছ" এর মতো আপনি যে কোনও নাম ব্যবহার করতে পারেন। তবে "শুরু" এবং "শেষ" হ'ল আগে এবং পরে উপাদান রাখার একটি ভাল কনভেনশন।

Question 4

বিকল্পভাবে আপনি ব্যবহার করতে পারেন:

app.comp.html

<app-child>
    <div role="header">This should be rendered in header selection of ng-content</div>
    <div role="body">This should be rendered in body selection of ng-content</div>
</app-child>

child.comp.html

<div class="header-css-class">
    <ng-content select="div[role=header]"></ng-content>
</div>
<div class="body-css-class">
    <ng-content select="div[role=body]"></ng-content>
</div>

Question 5

অন্যান্য উত্তর পরিপূরক:

এছাড়াও আপনি কাস্টম ট্যাগ এটা করতে পারেন (যেমন <ion-card>, <ion-card-header>এবং <ion-card-content>)।

app.comp.html

<app-child>
    <app-child-header>This should be rendered in header selection of ng-content</app-child-header>
    <app-child-content>This should be rendered in content selection of ng-content</app-child-content>
</app-child>

child.comp.html

<div class="header-css-class">
    <ng-content select="app-child-header"></ng-content>
</div>
<div class="content-css-class">
    <ng-content select="app-child-content"></ng-content>
</div>

আপনি একটি সতর্কতা বার্তা পাবেন, তবে এটি কার্যকর হবে। আপনি সতর্কতা বার্তাগুলি দমন করতে পারেন বা পরিচিত ট্যাগ যেমন headerবা হিসাবে ব্যবহার করতে পারেন footer। তবে, আপনি যদি এই পদ্ধতিগুলির কোনও পছন্দ না করেন তবে আপনার অন্য একটি সমাধানের সাথে চলতে হবে।