কৌণিক 2: কীভাবে উপাদানটির হোস্ট উপাদানটি স্টাইল করবেন?

Question

আমার কৌনিক 2 এ আমার উপাদান বলা আছে:

<my-comp></my-comp>

কৌনিক 2 এ এই উপাদানটির হোস্ট উপাদানটি কীভাবে একটি শৈলী তৈরি করে?

পলিমারে আপনি ": হোস্ট" নির্বাচক ব্যবহার করবেন। আমি এটি কৌনিক 2 এ চেষ্টা করেছি তবে এটি কার্যকর হয় না।

:host {
  display: block;
  width: 100%;
  height: 100%;
}

আমি উপাদানটি নির্বাচক হিসাবে ব্যবহার করার চেষ্টা করেছি:

my-comp {
  display: block;
  width: 100%;
  height: 100%;
}

উভয় পদ্ধতির কাজ বলে মনে হচ্ছে না।

ধন্যবাদ।

Comments

আপনি কি নিশ্চিত যে স্টাইলটি প্রয়োগ করা হয়নি? আমি একটি বেসিক প্রকল্প করেছি এবং ঠিক তা করেছি এবং এটি কার্যকর হয়েছে। আমি my-selector { color : red}আমার সিএসএস সেট করেছি এবং এটি দুর্দান্ত কাজ করে।

— পাকান

বিটা 7-র হিসাবে: হোস্ট সিলেক্টর আমার পক্ষে কাজ করছেন।

— জন সোয়ানসন

কৌণিক 2 উপাদান শৈলী

— ওন্দ্রা Žižka

Answer 1

একটি বাগ ছিল, কিন্তু এর মধ্যে এটি ঠিক করা হয়েছিল। :host { }এখন ঠিক কাজ করে।

সমর্থিত হয়

• :host(selector) { ... }জন্য selectorবৈশিষ্ট্যাবলী, ক্লাস মেলে ... হোস্ট উপাদান

• :host-context(selector) { ... }জন্য selectorউপাদান, ক্লাস, ... পিতা বা মাতা উপাদান মেলে

• selector /deep/ selectorselector >>> selectorশৈলীর উপাদান সীমানা জুড়ে মেলাতে শৈলীর জন্য (ওরফে SASS এর সাথে কাজ করে না)

  • আপডেট: SASS হ্রাস করা হচ্ছে /deep/।
    কৌণিক (টিএস এবং ডার্ট) ::ng-deepএকটি প্রতিস্থাপন হিসাবে যোগ করা হয়েছে যা এসএএসএস এর সাথেও উপযুক্ত।

  • আপডেট 2: ::slotted ::slotted এখন সমস্ত নতুন ব্রাউজার দ্বারা সমর্থিত এবং `ভিউ-এঙ্ক্যাপসুলেশন.শাদোডম https://developer.mozilla.org/en-US/docs/Web/CSS/ :: স্লটটেড ব্যবহার করা যেতে পারে
    

আরও দেখুন কৌণিক 2 কম্পোনেন্ট মধ্যে বহিরাগত CSS স্টাইল লোড

/deep/এবং ক্রোমে যে হ্রাস পেয়েছে একই নির্বাচনকারী সংযুক্তকারীগুলি দ্বারা প্রভাবিত>>> হয় না ।
কৌণিকগুলি তাদের অনুকরণ করে (পুনর্লিখন) করে এবং তাই তাদের সমর্থন করা ব্রাউজারগুলির উপর নির্ভর করে না।

এটি কেন /deep/এবং এর >>>সাথে কাজ করবেন না ViewEncapsulation.Nativeযা দেশী ছায়া ডোমকে সক্ষম করে এবং ব্রাউজার সমর্থনের উপর নির্ভর করে।

Comments

@Component({selector: 'some-selector', template: 'xxx', styles: [':host { display: block; background-color: green; border: solid 1px red; }']}) export class SomeClass {}

— গন্টার জ্যাচবাউয়ার

@ ওন্দ্রাŽইকা কি আপনি আরও বিস্তারিত বলতে পারবেন? এটি খাঁটি সিএসএস, এটি কীভাবে সিএসএসের সাথে বেমানান হতে পারে?

— গন্টার জ্যাচবাউয়ার 4

আমি সিএসএসে কিছু গুরুত্বপূর্ণ স্থানান্তর মিস না করলে, / গভীর / এবং >>> সিএসএস হয় না।

— ওন্দ্র Žižka

সেগুলি হ্রাস করা হয়েছে, তবে তাতে কিছু আসে যায় না। এগুলি কৌণিক (পুনর্লিখিত) দ্বারা অনুকরণ করা হয়, সুতরাং তারা কেবল ViewEncapsularion.Emulated(ডিফল্ট) দিয়ে কাজ করে তবে সাথে হয় না Native।

— গন্টার জ্যাচবাউয়ার

কৌনিক ২.৪..7 এ আমি :host { p { font-size: 80%; } }... উপাদান.এসএস ফাইলে কাজ করতে সক্ষম হয়েছি । এটির সাথে styles: [:host { p { font-size: 80%; } }]এটি ব্যবহার করার চেষ্টা করার সাথে সাথে আর কাজ করে না। খুব অদ্ভুত.

— মার্টিন

Answer 2

আমি কীভাবে কেবল উপাদান উপাদানকে স্টাইল করতে পারি তার একটি সমাধান খুঁজে পেয়েছি। এটি কীভাবে কাজ করে সে সম্পর্কে আমি কোনও ডকুমেন্টেশন পাইনি তবে আপনি 'হোস্ট' সম্পত্তির অধীনে উপাদান দিকনির্দেশনায় বৈশিষ্ট্যগুলির মানগুলি রাখতে পারেন:

@Component({
    ...
    styles: [`
      :host {
        'style': 'display: table; height: 100%',
        'class': 'myClass'
      }`
})
export class MyComponent
{
    constructor() {}

    // Also you can use @HostBinding decorator
    @HostBinding('style.background-color') public color: string = 'lime';
    @HostBinding('class.highlighted') public highlighted: boolean = true;
}

আপডেট: গন্টার জ্যাচবাউয়ার যেমন উল্লেখ করেছেন, তেমনি একটি বাগ ছিল এবং এখন আপনি হোস্ট উপাদানকে এমনকি সিএসএস ফাইলে স্টাইল করতে পারেন:

:host{ ... }

Comments

আমি একটি ডামি। রুট উপাদান তৈরি করার চেয়ে এটি আরও ভাল পছন্দ করি তবে আমি পছন্দ করি না যে এটি এই শৈলীগুলিকে ইনলাইন হিসাবে সেট করে (একটি !importantওভাররাইড করতে বাধ্য করছে)। আরও ভাল ওয়াই হতে হবে: \

— স্ক্রিমোথি

কোন মাধ্যমে styling host{}একটি stylesUrlফাইল কাজ করে না। প্রয়োজন :host।

— phil294

কীভাবে আমরা হোস্টের ভিতরে উপাদান পরিবর্তনশীল অ্যাক্সেস করতে পারি? আমি যদি গতিশীল পটভূমির রঙ সিদ্ধান্ত নিতে চান? ': হোস্ট {পটভূমি-রঙ: this.bgColor; } '

— প্রতাপ একে

@ প্রতাপা.কে হাই, আপনি হোস্টবাইন্ডিং ডাইওরেটর ব্যবহার করতে পারেন। আপনার উদাহরণটি হ'ল: @HostBinding('style.background-color') private color = 'lime'; গুগল আপনাকে অনেকগুলি উদাহরণ এবং নিবন্ধগুলি সন্ধান করবে।

— প্রিপিক

Answer 3

পরীক্ষা করে দেখুন এই সমস্যা । আমি মনে করি যে নতুন টেম্পলেট প্রাক-সংকলন যুক্তি প্রয়োগ করা হলে বাগটি সমাধান হয়ে যাবে। আপাতত আমি মনে করি আপনি সবচেয়ে ভাল করতে পারেন তা হল আপনার টেম্পলেটটিকে মোড়ানো <div class="root">এবং এটি স্টাইল করা div:

@Component({ ... })
@View({
  template: `
    <div class="root">
      <h2>Hello Angular2!</h2>
      <p>here is your template</p>
    </div>
  `,
  styles: [`
    .root {
      background: blue;
    }
  `],
   ...
})
class SomeComponent {}

এই উত্সাহী দেখুন

Answer 4

আপনার উপাদানটিতে আপনি আপনার হোস্ট উপাদানটিতে ক্লাস যুক্ত করতে পারেন যদি আপনার প্রয়োগ করতে চান এমন কিছু সাধারণ শৈলী থাকে।

export class MyComponent{
     @HostBinding('class') classes = 'classA classB';

Answer 5

:hostএখানে শিশুদের উপাদানগুলির স্টাইল করার জন্য যে কেউ ব্যবহার করবেন তার উদাহরণ::ng-deep

:host::ng-deep <child element>

যেমন :host::ng-deep span { color: red; }

অন্যরা /deep/যেমন অবহেলা করা হয়েছে বলেছে

Answer 6

চেষ্টা করুন: হোস্ট> / গভীর /:

প্যারেন্ট.কম্পোনাল.বিহীন ফাইলটিতে নিম্নলিখিতগুলি যুক্ত করুন

:host {
    /deep/ app-child-component {
       //your child style
    }
}

আপনার শিশু নির্বাচক দ্বারা অ্যাপ-চাইল্ড-উপাদানটি প্রতিস্থাপন করুন

Comments

আপনি যদি সেখানে একক স্টাইলের পরিবর্তে বুটস্ট্র্যাপের মতো স্টাইলশিট চান?

— আদিত্য বিকাশ দেবরপল্লি