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

Question

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

AngularJS এ লিখতাম

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

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

Comments

[লুকানো] = "! মাইভার" .. এটি কৌনিক 2+ তে কাজ করে

— প্রগতি দুগার

Answer 1

hiddenসম্পত্তিতে কেবল আবদ্ধ

[hidden]="!myVar"

আরো দেখুন

• https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden

সমস্যা

hiddenযদিও কিছু displayসম্পত্তির জন্য এটি CSS এর সাথে বিরোধ করতে পারে কারণ এর কিছু সমস্যা রয়েছে ।

কিভাবে দেখুন someমধ্যে Plunker উদাহরণ গোপন না হয়ে যায় কারণ এটি একটি শৈলী আছে

:host {display: block;}

সেট। (এটি অন্যান্য ব্রাউজারগুলিতে আলাদা আচরণ করতে পারে - আমি ক্রোম 50 দিয়ে পরীক্ষা করেছি)

কার্যসংক্রান্ত

আপনি এটি যোগ করে এটি ঠিক করতে পারেন

[hidden] { display: none !important;}

একটি বিশ্বব্যাপী শৈলীতে index.html।

আরেকটি ক্ষতি

hidden="false"
hidden="{{false}}"
hidden="{{isHidden}}" // isHidden = false;

হিসাবে একই

hidden="true"

এবং উপাদান প্রদর্শন করবে না।

hidden="false""false"সত্যবাদী হিসাবে বিবেচিত স্ট্রিং নিয়োগ করবে ।
কেবলমাত্র মান falseবা বৈশিষ্ট্যটি সরানোই উপাদানটিকে দৃশ্যমান করে তুলবে।

ব্যবহার {{}}একটি স্ট্রিং অভিব্যক্তি পরিবর্তন করে এবং আশানুরূপ কাজ করা হবে না।

কেবলমাত্র বাঁধাই []করা প্রত্যাশা অনুযায়ী কাজ করবে কারণ এটি পরিবর্তে falseবরাদ্দ করা হয়েছে ।false"false"

*ngIf বনাম [hidden]

*ngIfসম্পত্তি [hidden]পরিবর্তিত করার সময় এটি কার্যকরভাবে ডিওএম থেকে তার সামগ্রীটি সরিয়ে দেয় displayএবং কেবল ব্রাউজারকে সামগ্রীটি না দেখানোর জন্য নির্দেশ দেয় তবে ডিওমে এটি এখনও রয়েছে।

Comments

লুকানো ব্যবহার করা বাঞ্ছনীয় নয়। angularjs.blogspot.com/2016/04/…

— স্যাম

*ngIfবেশিরভাগ ক্ষেত্রে সঠিক উপায়ে হতে পারে তবে কখনও কখনও আপনি আসলে কোনও উপাদানটি দেখতে চান যা দৃশ্যত লুকানো থাকে। [hidden]{display:none!important}সহায়তা সহ একটি সিএসএস শৈলী । এটি উদাহরণস্বরূপ, বুটস্ট্র্যাপ কীভাবে নিশ্চিত [hidden]করে যে উপাদানগুলি আসলে লুকানো থাকে। গিটহাব দেখুন

— কুনিংফ্যাটালিস্ট

আপনি যখন (এনস্ট্রি | অ্যাসিঙ্ক) পাইপটি * এনজিআই এর ভিতরে ব্যবহার করেন তখন আপনি কিছু সমস্যার মুখোমুখি হতে পারেন যদি (মাইস্ট্রিম | অ্যাসিঙ্ক) পাইপও ব্যবহার করে

— পাভেল ব্লাগোডভ

আপনি আমার ত্রাণকর্তা! * এনজিআইএফ ব্যবহার করে ডম অবস্থানটি শীর্ষে রিসেট করবে তবে [লুকানো] আমার সমস্যা সমাধান করেছে এবং অবস্থানটি সংরক্ষণ করবে।

— সন্তোষ

এমন একটি ক্ষেত্রে যেখানে কেউ * এনজিআই-র উপরে [লুকানো] ব্যবহার করতে চাইতে পারে আপনি যখন হোস্টলিস্টনার ব্যবহার করছেন (এবং ইভেন্ট ডটকমের সাথে ডকুমেন্ট ক্লিকগুলি পৃথক করতে চান), যখন উপাদানগুলি দেখানোর এবং আড়াল করার চেষ্টা করছেন (কাস্টম ড্রপ ডাউনস এর মতো)

— আখৌরি

Answer 2

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

[hidden]="!myVar"

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

*ngIf="myVar"

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

Comments

[লুকানো] কন্ডিশনালিকে উপাদানটিতে "লুকানো" একটি বৈশিষ্ট্য যুক্ত করছে। এটি [যাই হোক না কেন] বা [আলি] হতে পারে। এখানে গুরুত্বপূর্ণ বিষয়টি এমন একটি সিএসএস নিয়ম লোড করা যা "লুকানো" বৈশিষ্ট্যগুলি উল্লেখ করে তা প্রদর্শন করতে হবে: কোনও কিছুই নেই

— গ্যাব্রিয়েল

মনে রাখবেন: * এনজিআই এবং [লুকানো] মূলসূত্রগুলি পৃথক। শর্তটি সত্য না হওয়া পর্যন্ত এনজিআইফ * এনজিআইফ ব্লকের ভিতরে থাকা সামগ্রীর মূল্যায়ন করবে না। এটি বিশেষত গুরুত্বপূর্ণ যদি আপনি asyncপাইপটি ব্যবহার করেন তবে পর্যবেক্ষণযোগ্যদের সাবস্ক্রিপশন কেবল শর্তটি সত্য হওয়ার পরে যুক্ত হবে!

— ডায়নালন

আরও একটি বিষয় বিবেচনায় রাখা উচিত: * এনজিআইএফ উপাদানটি ধ্বংস করে এবং এটি পুনরায় তৈরি করতে হবে, [লুকানো] এটিকে জীবিত এবং স্মৃতিতে রাখে। আপনার যদি কোনও সংস্থান-তীব্র উপাদান থাকে তবে এটি ধ্বংস করার পরিবর্তে এটি আড়াল করা ভাল

— মাইকেল কর্ক।

তারা একই জিনিস নয়।

— কামুরান সানেসেক

Answer 3

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

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

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

[class.is-loading]="isLoading"

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

&.is-loading { display: none } 

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

Comments

এটি বুটস্ট্র্যাপ 4 invalid-feedbackক্লাসের সাথে ভাল কাজ করে ।

— জেস 14

Answer 4

দুঃখিত, আমি কৌনিক 2 ব্যবহার করার সময় অনিরাপদ হিসাবে বিবেচিত এমন গোপনের সাথে আবদ্ধ হওয়ার সাথে একমত হতে পারি না কারণ এটি লুকানো শৈলী সহজেই ওভাররাইট করা যেতে পারে উদাহরণস্বরূপ ব্যবহার করে

display: flex;

প্রস্তাবিত পন্থাটি হ'ল * এনজিআইফ ব্যবহার করা যা নিরাপদ। আরও বিশদের জন্য দয়া করে অফিসিয়াল কৌণিক ব্লগটি দেখুন। কৌনিক 2 এর সাথে এড়াতে 5 রুকি ভুল

<div *ngIf="showGreeting">
   Hello, there!
</div>

Comments

আমি মনে করি সঠিক প্রয়োজনীয়তাগুলি জানার আগে কিছু বলা খারাপ a যদি কেউ চান না যে কোনও উপাদান মুছে ফেলা হবে এবং ধ্বংস হয়ে যায় এবং যুক্ত ও পুনরায় তৈরি করা *ngIfহয় তবে এটি একটি বাজে পছন্দ। তবে আপনি ঠিক বলেছেন যে পরিণতিগুলি বিবেচনা করা উচিত এবং অসুবিধাগুলি দেখানো সর্বদা একটি ভাল ধারণা।

— Gternter Zöchbauer

আমি জানি তুমি কী বোঝাতে চাও। এটি সম্পর্কে আমার কথা নয় যে এটি একটি আশ্চর্যজনক ভুল, এটি অ্যাঙ্গুলার 2 অফিশিয়াল ব্লগ থেকে নেওয়া হয়েছে। আমি কাউকে আপত্তি জানাতে চাইছি না। যদিও উল্লেখ করার জন্য ধন্যবাদ।

— টিম হং

হ্যাঁ, আমি ngIfএই প্রশ্নটি যা জিজ্ঞাসা করছে তার ঠিক উত্তর দিচ্ছি না । আমি কোনও পৃষ্ঠায় এমন কিছু লিখিত সামগ্রী আড়াল করতে চাই যাতে ক <router-outlet>। আমি যদি ব্যবহার করি তবে আমি ngIfএকটি ত্রুটি পেয়েছি যা এটি আউটলেটটি খুঁজে পাবে না। আমার ডেটা লোড না হওয়া পর্যন্ত আমার আউটলেটটি লুকিয়ে রাখতে হবে , আমার ডেটা লোড হওয়া পর্যন্ত অনুপস্থিত নয় ।

— জেসন সোয়েট

আমি আপনার সাথে একমত, তবে আমার যে সমস্যাটি তা হ'ল আমি একটি ফর্ম দেখাতে চাই এবং মানগুলি লিখতে চাই যদি আমি * এনজিআই ব্যবহার করি তবে আমার ত্রুটি হবে যে এটি সংজ্ঞায়িত নয় এবং গোপন সম্পত্তিটির সাথে এটি ভালভাবে কাজ করছে

— হাজেম হাসান

@ হাজেমহসান, নিশ্চিত আমি বুঝেছি. সমাধান সর্বদা শর্তাধীন। আপনার ক্ষেত্রে, অন্য কোনও কোডের বিরুদ্ধে চালানোর আগে কেবল ফর্মটি রয়েছে কিনা তা যাচাই করা সম্ভব কিনা তা নিশ্চিত হন না। এটি সব বাণিজ্য বন্ধ সম্পর্কে। আপনি কি ফর্মটি আড়াল করার নিরাপদ উপায় চান যা দুর্ঘটনাক্রমে ভবিষ্যতে অন্য স্টাইলিং দ্বারা অফসেট হবে না? অথবা আপনি কি ফর্মটি বিদ্যমান কিনা তা পরীক্ষা না করার সুবিধার্থে পছন্দ করেন?

— টিম হং

Answer 5

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

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

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

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

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

Answer 6

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

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

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

লক্ষ্য করুন যে জন্য showAngular2 মধ্যে আচরণ আমরা যোগ করতে হবে !(না) ngShowVal আগে, এবং জন্য hideAngular2 মধ্যে আচরণ আমরা না যোগ করতে হবে !(না) ngHideVal আগে।

Answer 7

<div [hidden]="myExpression">

আমার এক্সপ্রেশন সত্য বা মিথ্যাতে সেট করা যেতে পারে

Comments

<div hidden="{{ myExpression }}">এটি কাজ করবে না, কারণ "মাই এক্সপ্রেশন" এইচটিএমএলে রেন্ডার করার জন্য একটি স্ট্রিংয়ে রূপান্তরিত হবে। "সত্য" এবং "মিথ্যা" উভয় স্ট্রিং সত্যবাদী, তাই এটি সর্বদা লুকানো থাকবে

— ভিপ্রাস

Answer 8

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

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

Comments

বুটস্ট্র্যাপ 4 ব্যবহার [hidden]করে একই কাজ করে তাই আমি সুপারিশ করি[hidden]

— বহিদ

Answer 9

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

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

Answer 10

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

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>

Answer 11

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

এইচটিএমএল:

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

সিএসএস:

[hidden] {
   display: none;
}

Answer 12

এটিই আমার পক্ষে কাজ করেছে:

<div [style.visibility]="showThis ? 'visible' : 'hidden'">blah</div>

Answer 13

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

Answer 14

আমার জন্য, [hidden]=!varকখনও কাজ করে না।

সুতরাং, <div *ngIf="expression" style="display:none;">

এবং, <div *ngIf="expression">সর্বদা সঠিক ফলাফল দিন।

Answer 15

কৌণিক নথিতে দুটি উদাহরণ রয়েছে 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>

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

Answer 16

ব্যবহার করে এই সমস্যাটি মোকাবেলা করার সর্বোত্তম উপায় ngIf কারণ এটি উপাদানটিকে সামনের প্রান্তে রেন্ডার করতে ভালভাবে প্রতিরোধ করে,

আপনি যদি [hidden]="true"স্টাইল লুকান বা স্টাইল ব্যবহার করেন তবে [style.display]এটি কেবল সামনের প্রান্তে উপাদানটি লুকিয়ে রাখবে এবং কেউ মানটি পরিবর্তন করতে এবং সহজেই এটি দৃশ্যমান করতে পারে, আমার মতে উপাদানটি আড়াল করার সর্বোত্তম উপায় হ'লngIf

<div *ngIf="myVar">stuff</div>

এবং এছাড়াও আপনার যদি একাধিক উপাদান থাকে (অন্যটিও বাস্তবায়নের প্রয়োজন হয়) তবে আপনি <ng-template>বিকল্পটি ব্যবহার করতে পারেন

<ng-container *ngIf="myVar; then loadAdmin else loadMenu"></ng-container>
<ng-template #loadMenu>
     <div>loadMenu</div>
</ng-template>

<ng-template #loadAdmin>
     <div>loadAdmin</div>
</ng-template>  

নমুনা এনজি-টেম্পলেট কোড

Answer 17

যদি আপনি কেবল অ্যাঙ্গুলারজেএস নিয়ে আসা প্রতিসম hidden/ shownনির্দেশিকাগুলি ব্যবহার করতে চান তবে আমি এই জাতীয় টেমপ্লেটগুলিকে সহজ করার জন্য একটি অ্যাট্রিবিউট ডাইরেক্টিভ লেখার পরামর্শ দিই (কৌণিক with দিয়ে পরীক্ষিত):

import { Directive, Input, HostBinding } from '@angular/core';

@Directive({ selector: '[shown]' })
export class ShownDirective {
  @Input() public shown: boolean;

  @HostBinding('attr.hidden')
  public get attrHidden(): string | null {
    return this.shown ? null : 'hidden';
  }
}

অন্যান্য সমাধানগুলির অনেকগুলিই সঠিক। আপনার উচিত ব্যবহার *ngIfযেখানেই সম্ভব। hiddenঅ্যাট্রিবিউটটি ব্যবহার করে অপ্রত্যাশিত শৈলী প্রয়োগ করা যেতে পারে, তবে আপনি অন্যের জন্য উপাদানগুলি না লিখলে আপনি সম্ভবত তা জানেন কিনা। সুতরাং এই shownনির্দেশিকাটির কাজ করার জন্য, আপনিও নিশ্চিত করেছেন যে আপনি যুক্ত করেছেন:

[hidden]: {
  display: none !important;
}

আপনার বৈশ্বিক শৈলীতে কোথাও।

এগুলির সাহায্যে আপনি এভাবে নির্দেশিকাটি ব্যবহার করতে পারেন:

<div [shown]="myVar">stuff</div>

এর মতো প্রতিসম (এবং বিপরীত) সংস্করণ সহ:

<div [hidden]="myVar">stuff</div>

যোগ করতে shoulds - তোমাকে উচিত আমাদের তাই মত একটি উপসর্গ [acmeShown]বনাম মাত্র [shown]।

আমি একটি shownঅ্যাট্রিবিউট ডাইরেক্টিভটি ব্যবহার করার প্রধান কারণ হ'ল অ্যাঙ্গুলারজেএস কোডটি কৌণিক -AND- তে রূপান্তর করা যখন লুকানো হচ্ছে এমন সামগ্রীতে কনটেইনার উপাদান রয়েছে যা এক্সএইচআর রাউন্ড ট্রিপগুলি সৃষ্টি করে। যে কারণে আমি কেবল ব্যবহার করি না তা [hidden]="!myVar"হ'ল প্রায়শই এটি আরও জটিল: [hidden]="!(myVar || yourVar) && anotherVar" - yes I can invert that, but it is more error prone.[দেখানো]। এ সম্পর্কে ভাবতে সহজ।

Answer 18

লুকানোর জন্য এবং ডিভিশন বোতামটি প্রদর্শন করতে কৌনিক 6 এ ক্লিক করুন।

এইচটিএমএল কোড

<button (click)=" isShow=!isShow">FormatCell</button>
<div class="ruleOptionsPanel" *ngIf=" isShow">
<table>
<tr>
<td>Name</td>
<td>Ram</td>
</tr>
</table>
</div>

উপাদান .ts কোড

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{
 isShow=false;
  }

এটি আমার পক্ষে কাজ করে এবং এটি এনজি-হাইড এবং এনজি-শোটি কৌনিক 6 এ প্রতিস্থাপনের উপায়।

উপভোগ ...

ধন্যবাদ

Comments

আপনি এনজিআইএফ ব্যবহার করছেন - যা এনজি শো থেকে আলাদা। এনজিআইএফ ডিওএম রূপটি সরিয়ে / যুক্ত করবে। এটি এনজি শো / এনজিহাইডের মতো নয় যা কেবলমাত্র এলিমেন্টে CSS স্টাইল যুক্ত / সরিয়ে দেবে।

— গিল এপস্টেইন

উদাহরণটি খুব দীর্ঘ এবং খুব নির্দিষ্ট।

— মাস্টারেক্সিলো