angular - কৌণিক 2+ এ এনজি শো এবং এনজিহাইডের সমতুল্য কত?




angular-components angular-template (10)

আপনি যদি বুটস্ট্র্যাপ ব্যবহার করেন তবে এটি এত সহজ:

<div [class.hidden]="myBooleanValue"></div>

আমার বেশ কয়েকটি উপাদান রয়েছে যা আমি নির্দিষ্ট শর্তে দৃশ্যমান হতে চাই।

AngularJS এ লিখতাম

<div ng-show="myVar">stuff</div>

আমি কৌনিক 2+ এ কীভাবে এটি করতে পারি?


আমার ক্ষেত্রে তাত্পর্য সহ আমি নিজেকে একই পরিস্থিতিতে দেখতে পাই উপাদানটি একটি ফ্লেক্স পাত্রে ছিল। যদি আপনার ক্ষেত্রে না হয় তবে চারপাশে একটি সহজ কাজ হতে পারে

[style.display]="!isLoading ? 'block' : 'none'"

আমার ক্ষেত্রে আমরা যে আরও অনেক ব্রাউজারকে সমর্থন করি তার পরেও সমস্যাগুলি এড়াতে বিক্রেতার উপসর্গের প্রয়োজন হয় যা আমি অন্য সহজ সমাধানের জন্য গিয়েছিলাম

[class.is-loading]="isLoading"

যেখানে সিএসএস হিসাবে সহজ

&.is-loading { display: none } 

ছেড়ে যাওয়ার পরে প্রদর্শিত রাষ্ট্রটি ডিফল্ট শ্রেণীর দ্বারা পরিচালিত হয়।


এই সমস্যাটি পেরিয়ে অন্য কারও পক্ষে হোঁচট খাওয়ার জন্য, আমি এটি এভাবে সম্পাদন করেছি।

import {Directive, ElementRef, Input, OnChanges, Renderer2} from "@angular/core";

@Directive({
  selector: '[hide]'
})
export class HideDirective implements OnChanges {
  @Input() hide: boolean;

  constructor(private renderer: Renderer2, private elRef: ElementRef) {}

  ngOnChanges() {
    if (this.hide) {
      this.renderer.setStyle(this.elRef.nativeElement, 'visibility', 'hidden');
    } else {
      this.renderer.setStyle(this.elRef.nativeElement, 'visibility', 'visible');
    }
  }
}

আমি 'visibility' ব্যবহার করেছি কারণ আমি উপাদানটির দ্বারা দখল করা স্থানটি সংরক্ষণ করতে চেয়েছিলাম। আপনি যদি এটি না করতে চান, তবে আপনি কেবল 'display' ব্যবহার করতে পারেন এবং এটি 'none' তে সেট করতে পারেন;

আপনি এটিকে আপনার এইচটিএমএল উপাদানের সাথে বেঁধে রাখতে পারেন, গতিশীলভাবে বা না।

<span hide="true"></span>

অথবা

<span [hide]="anyBooleanExpression"></span>

কৌণিক নথিতে দুটি উদাহরণ রয়েছে https://angular.io/guide/structural-directives#why-remove-rather-than-hide

কোনও নির্দেশাবলীর প্রদর্শন স্টাইলটি কোনওটিতে সেট করেই অযাচিত অনুচ্ছেদটিকে আড়াল করতে পারে।

<p [style.display]="'block'">
  Expression sets display to "block".
  This paragraph is visible.
</p>

<p [style.display]="'none'">
  Expression sets display to "none".
  This paragraph is hidden but still in the DOM.
</p>

আপনি এনজিহাইড প্রতিস্থাপন করতে [স্টাইল.ডিসপ্লে] = "'ব্লক'" এবং [স্টাইল.ডিসপ্লে] = "'কিছুই না' ব্যবহার করতে পারেন।


বুটস্ট্র্যাপ ৫.০-এ ক্লাস "d-none" = "প্রদর্শন: কিছুই নয়! গুরুত্বপূর্ণ;"

<div [ngClass]="{'d-none': exp}"> </div>

যদি আপনার ক্ষেত্রে শৈলীটি প্রদর্শন করা হয় তবে আপনি এনজিস্টাইল নির্দেশিকাটি ব্যবহার করতে পারেন এবং সরাসরি প্রদর্শনটি পরিবর্তন করতে পারেন, আমি এটি করেছি যে বুটস্ট্র্যাপ ড্রপডাউন এর জন্য ইউএল কোনওটি প্রদর্শন করার জন্য সেট করা নেই।

সুতরাং আমি "ম্যানুয়ালি" প্রদর্শনের জন্য ইউএল টগল করার জন্য একটি ক্লিক ইভেন্ট তৈরি করেছি

/* style.css */
.hide 
{
    display: none !important;
}

<!-- old angular1 ngShow -->
<div ng-show="ngShowVal"> I'm Angular1 ngShow... </div>

<!-- become new angular2 ngClass -->
<div [ngClass]="{ 'hide': !ngShowVal }"> I'm Angular2 ngShow... </div>

<!-- old angular2 ngHide -->
<div ng-hide="ngHideVal"> I'm Angular1 ngHide... </div>

<!-- become new angular2 ngClass -->
<div [ngClass]="{ 'hide': ngHideVal }"> I'm Angular2 ngHide... </div>

তারপরে আমার শোড্রপডাউন উপাদানটিতে: বুল অ্যাট্রিবিউট যা আমি প্রতিবার টগল করি এবং ইনটির উপর ভিত্তি করে শৈলীর জন্য ডিসপ্লেডিডিএল নীচে সেট করি

<div class="dropdown">
    <button class="btn btn-default" (click)="manualtoggle()"  id="dropdownMenu1" >
    Seleccione una Ubicación
    <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" [ngStyle]="{display:displayddl}">
        <li *ngFor="let object of Array" (click)="selectLocation(location)">{{object.Value}}</li>                                
     </ul>
 </div>    

ngShow এবং ngHide ngShow 1 ডকুমেন্টেশন অনুসারে, এই দুটি ngHide সিএসএস শৈলীর display: none !important; ngHide display: none !important; , সেই নির্দেশের শর্ত অনুযায়ী উপাদানটিতে (এনজি শোতে মিথ্যা মানের উপর সিএসএস যুক্ত হয়, এবং এনজিহাইডের জন্য সত্যিকারের মানের জন্য সিএসএস যোগ করা হয়)।

আমরা কৌনিক 2 নির্দেশক এনজি ক্লাস ব্যবহার করে এই আচরণটি অর্জন করতে পারি:

showDropDown:boolean;
displayddl:string;
manualtoggle(){
    this.showDropDown = !this.showDropDown;
    this.displayddl = this.showDropDown ? "inline" : "none";
}

লক্ষ্য করুন যে Angular2 এ show আচরণের জন্য আমাদের যুক্ত করা দরকার ! (না) এনজি শোভাল এর আগে, এবং অ্যাঙ্গুলার 2 এ hide আচরণের জন্য আমাদের যুক্ত করার দরকার নেই ! (নয়) এনজিহাইডওয়ালের আগে।


[hidden] বৈশিষ্ট্যটি ব্যবহার করুন:

[hidden]="!myVar"

অথবা আপনি *ngIf ব্যবহার করতে পারেন

*ngIf="myVar"

এটি কোনও উপাদান দেখানোর / আড়াল করার দুটি উপায়। পার্থক্যটি হ'ল: *ngIf থেকে উপাদানটি সরিয়ে ফেলবে যখন [hidden] ব্রাউজারকে *ngIf থাকা উপাদানকে রেখে সিএসএস display সম্পত্তি ব্যবহার করে কোনও উপাদান প্রদর্শন / আড়াল করতে বলবে।


লুকানো যেমন আপনি কোনও মডেলকে নিয়ন্ত্রণের সাথে আবদ্ধ করেন এবং এর জন্য সিএসএস নির্দিষ্ট করেন তা ব্যবহার করুন:

এইচটিএমএল:

<input type="button" class="view form-control" value="View" [hidden]="true" />

সিএসএস:

[hidden] {
   display: none;
}

<div [hidden]="flagValue">
---content---
</div>




angular-template