উপাদানটিকে হোস্টে কীভাবে "ক্লাস" যুক্ত করবেন?

187

আমি জানি না কীভাবে আমার উপাদানটিতে <component></component>একটি গতিশীল শ্রেণীর বৈশিষ্ট্য যুক্ত করা যায় তবে এইচটিএমএল (উপাদান html) টেম্পলেটটির অভ্যন্তরে।

আমি খুঁজে পাওয়া একমাত্র সমাধান হ'ল "এলিমেন্টআরফ" নেটিভ এলিমেন্টের মাধ্যমে আইটেমটি সংশোধন করা। এই সমাধানটি খুব সহজ হওয়া উচিত এমন কিছু করতে কিছুটা জটিল বলে মনে হচ্ছে।

আর একটি সমস্যা হ'ল সিএসএসকে উপাদান স্কোপের বাইরে সংজ্ঞায়িত করতে হবে, উপাদান এনক্যাপসুলেশন ভেঙে।

এর চেয়ে সহজ সমাধান কি আছে? <root [class]="..."> .... </ root>টেম্পলেট ভিতরে কিছু ।

angular angular2-template

— lascarayf
সূত্র

293

@Component({
   selector: 'body',
   template: 'app-element',
   // prefer decorators (see below)
   // host:     {'[class.someClass]':'someField'}
})
export class App implements OnInit {
  constructor(private cdRef:ChangeDetectorRef) {}

  someField: boolean = false;
  // alternatively also the host parameter in the @Component()` decorator can be used
  @HostBinding('class.someClass') someField: boolean = false;

  ngOnInit() {
    this.someField = true; // set class `someClass` on `<body>`
    //this.cdRef.detectChanges(); 
  }
}

চূড়ান্ত উদাহরণ

এইভাবে আপনাকে উপাদানটির বাইরে সিএসএস যুক্ত করার দরকার নেই। সিএসএস পছন্দ

:host(.someClass) {
  background-color: red;
}

উপাদানটির অভ্যন্তর থেকে কাজ করে এবং নির্বাচক কেবল তখনই প্রয়োগ করা হয় যখন শ্রেণিটি someClassহোস্ট উপাদানটিতে সেট করা থাকে।

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

আমি পরিবর্তে- someField = trueমধ্যে ngOnInit()আদর্শ করতে হবে ngAfterViewInit()। আমি অন্যথায় এটি কাজ করতে পারে না।

— জন

এখানে একটি কাঁটাচামচ তৈরি করেছে যা প্রকৃত :hostঅংশটি কাজ করে দেখায় । আমি কোথা থেকে @Component মধ্যে হোস্ট প্যারামিটার () প্রসাধক (সিনট্যাক্স আমাকে সুস্পষ্ট নয়, এবং সম্পর্কে আরও জানতে পারেন @Component ডকুমেন্টেশন খুব ব্যাখ্যা না ) অথবা আপনার পছন্দের HostBinding সম্পর্কে আরো জানতে (এটি শুধুমাত্র এর একটি ইন্টারফেস হিসেবে তালিকাভুক্ত উপর কৌণিক 2 সাইট?)

— রেড মটর

আমি ভাল ডক্স জানি না, কিন্তু এটা ঠিক করছেন সঙ্গে আপনি কি করতে পারি একটি ভিন্ন উপায়@Input() @Output() @HostBinding() @HostListener() @ViewChild(ren)() @ContentChild(ren)()

— গুন্টার Zöchbauer

1

হোস্ট বাইন্ডিংয়ের জন্য আলাদা নামের সাথে একটি @HostBinding('class.xxx') get xxxclass(){ return !this.someField;}

— গেটর ব্যবহার করুন

1

@ যোচাই অোকোকা নিশ্চিত হন না যে আপনি কী উল্লেখ করেছেন। আমি এই বিধি সম্পর্কে অবগত নই। কম সাধারণত বেশি হয়, তাই যদি আপনি অতিরিক্ত উপাদান যুক্ত করা এড়াতে পারেন তবে আপনার এটি এড়ানো উচিত।

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

184

গন্টারের উত্তর দুর্দান্ত (প্রশ্ন গতিশীল শ্রেণীর বৈশিষ্ট্য জিজ্ঞাসা করছে ) তবে আমি ভেবেছিলাম আমি কেবল সম্পূর্ণতার জন্য যুক্ত করব ...

যদি আপনি আপনার উপাদানটির হোস্ট উপাদানটিতে এক বা একাধিক স্থিতিশীল ক্লাস যুক্ত করার দ্রুত এবং পরিষ্কার উপায়ের সন্ধান করেন (যেমন, থিম-স্টাইলিংয়ের উদ্দেশ্যে) আপনি কেবলমাত্র এটি করতে পারেন:

@Component({
   selector: 'my-component',
   template: 'app-element',
   host: {'class': 'someClass1'}
})
export class App implements OnInit {
...
}

এবং আপনি যদি এন্ট্রি ট্যাগে কোনও ক্লাস ব্যবহার করেন তবে কৌণিক ক্লাসগুলি মার্জ করবে, অর্থাত,

<my-component class="someClass2">
  I have both someClass1 & someClass2 applied to me
</my-component>

— JoshuaDavid
সূত্র

1

সরলতার জন্য এই ভালবাসা। তবে আমার ক্ষেত্রে হোস্ট উপাদানটি একটি আলাদা বৈশিষ্ট্যের সাথে আবদ্ধ করা হয়েছে, আসুন এটি ngcontent_hostআমার উপাদানগুলির ngcontent_template , let's call those শৈলীর , so if I put a style in the url` টেমপ্লেটের উপাদানগুলির যে কোনও বৈশিষ্ট্যের তুলনায় কল করুন , তারা হোস্ট উপাদানকে প্রভাবিত করবে না কারণ তারা প্রভাব ফেলবে না ngcontent_host, তারা কেবলমাত্র টেম্পলেট উপাদানগুলিকে প্রভাবিত করতে পারে; তারা কেবল প্রভাবিত করতে পারে ngcontent_template। আমি কি ভুল করছি? এ সম্পর্কে কোন পরামর্শ? আমি মনে করি আমি সর্বদা ঘুরে আসতে পারিViewEncapsulation.None

— লাল মটর

11

অন্য উপায় হ'ল কেবল পরিবর্তনশীল এড়িয়ে যাওয়া @HostBinding('class.someClass') true;,। আপনি এমনকি আপনার উপাদানগুলি প্রসারিত যে কোনও ক্লাস থেকে এটি করতে পারেন।

— অ্যাডামডপোর্ট

3

একাধিক ক্লাস যুক্ত করতে আপনি হোস্ট করতে পারেন: {'[শ্রেনী]': '"Class1 Class2" "}

— jbojcic

4

আপনি যদি হোস্ট: {}বৈকল্পিক ব্যবহার করেন তবে আপনি use-host-property-decoratorসেটিংটি falseইন সেট করতে চাইতে পারেন tslint.json। অন্যথায় আপনি আইডিই সতর্কতা পাবেন। @ অ্যাডমডপোর্ট এই পদ্ধতিটি আর কাজ করে না। আমাদের অ্যাপে কৌনিক 5.2.2 ব্যবহার করা।

— রুড ভুস্ট

1

এটি কি কেবল আমিই বা নতুন পথটির চেয়ে পুরানো পথটি আরও ভাল দেখাচ্ছে? আমি নিশ্চিত যে তাদের মাইগ্রেশন করার উপযুক্ত কারণ ছিল, তবে মেহ ...

— পিষ্ট করুন

12

আপনি কেবল @HostBinding('class') class = 'someClass';আপনার @ বিভাগের শ্রেণীর অভ্যন্তরে যোগ করতে পারেন ।

উদাহরণ:

@Component({
   selector: 'body',
   template: 'app-element'       
})
export class App implements OnInit {

  @HostBinding('class') class = 'someClass';

  constructor() {}      

  ngOnInit() {}
}

— মাইক ডি 3 ভিআইডি টাইসন
সূত্র

1

Classname নির্দেশ ব্যবহার করা যায় এবং এটি ব্যবহার এড়াতে উত্তম classএকটি পরিবর্তনশীল নামের (যেহেতু আপনি এটা রেফারেন্স পারে এবং এটা পরে পরিবর্তন)। উদাহরণ: @HostBinding('className') myTheme = 'theme-dark';।

— সিপিএইচপিথন

3

আপনি যদি আপনার হোস্ট উপাদানটির সাথে একটি গতিশীল শ্রেণি যুক্ত করতে চান তবে আপনি নিজের গেটারের HostBindingসাথে একত্রিত করতে পারেন

@HostBinding('class') get class() {
    return aComponentVariable
}

এ Stackblitz ডেমো https://stackblitz.com/edit/angular-dynamic-hostbinding

— Saksham
সূত্র

0

এটি আমি এখানে কীভাবে করেছি (কৌণিক 7):

উপাদানটিতে, একটি ইনপুট যুক্ত করুন:

@Input() componentClass: string = '';

তারপরে উপাদানটির এইচটিএমএল টেমপ্লেটে এমন কিছু যুক্ত করুন:

<div [ngClass]="componentClass">...</div>

এবং অবশেষে এইচটিএমএল টেমপ্লেটে যেখানে আপনি উপাদানটি উল্লেখ করেছেন:

<root componentClass="someclass someotherclass">...</root>

দাবি অস্বীকার: আমি কৌণিকের কাছে মোটামুটি নতুন, তাই আমি সম্ভবত এখানে ভাগ্যবান হয়ে উঠছি!

— zippycoder
সূত্র

2

সামান্য নেক্রো কিন্তু: এটি হোস্ট উপাদানটিতে সিএসএস শ্রেণি যুক্ত করে না - যা <root>ট্যাগের উপাদান , আপনি উপাদানটির টেম্পলেটে কিছু যুক্ত করেন না।

— মিলিমুজ