Angular 2+에서 ngShow 및 ngHide와 동일한 기능은 무엇입니까?

특정 조건에서 볼 수있는 여러 요소가 있습니다.

AngularJS에서 나는 쓸 것이다.

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

Angular 2 이상에서 어떻게 할 수 있습니까?

그냥 hidden속성에 바인딩

[hidden]="!myVar"

또한보십시오

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

이슈

hiddendisplay속성에 대한 CSS와 충돌 할 수 있기 때문에 몇 가지 문제가 있습니다.

방법을 참조하십시오 some에서 Plunker 예 는 스타일을 가지고 있기 때문에 숨겨진되지 않습니다

:host {display: block;}

세트. (이것은 다른 브라우저에서 다르게 작동 할 수 있습니다-Chrome 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 vs [hidden]

*ngIf속성 을 [hidden]수정하는 동안 DOM에서 내용을 효과적으로 제거하고 display브라우저에 내용을 표시하지 않지만 DOM에는 여전히 내용을 포함하도록 지시합니다.

[hidden]속성을 사용하십시오 .

[hidden]="!myVar"

아니면 사용할 수 있습니다 *ngIf

*ngIf="myVar"

요소를 표시하거나 숨기는 두 가지 방법이 있습니다. 유일한 차이점은 *ngIfDOM에서 요소를 제거하는 반면 DOM [hidden]에 요소를 display유지 하여 CSS 속성을 사용하여 요소를 표시하거나 숨기도록 브라우저에 지시 하는 것 입니다.

나는 내 경우와 다른 상황에서 같은 상황에 처한 것을 발견했다. 요소가 플렉스 컨테이너였다.

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

내 경우에는 우리가 지원하는 많은 브라우저가 여전히 문제를 피하기 위해 공급 업체 접두사가 필요하다는 사실 때문에 다른 쉬운 해결책을 찾았습니다.

[class.is-loading]="isLoading"

그러면 CSS는 다음과 같이 간단합니다.

&.is-loading { display: none } 

표시된 상태를 기본 클래스가 처리 한 상태로 둡니다.

죄송합니다, Angular 2를 사용할 때 안전하지 않은 것으로 간주되는 hidden에 바인딩하는 것에 동의하지 않아야합니다. 이는 숨겨진 스타일을 사용하여 예를 들어

display: flex;

권장되는 방법은 * ngIf를 사용하는 것이 더 안전합니다. 자세한 내용은 공식 Angular 블로그를 참조하십시오. Angular 2로 피해야 할 5 가지 신인 실수

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

귀하의 경우 스타일이 표시되지 않는 경우 ngStyle 지시문을 사용하고 디스플레이를 직접 수정할 수도 있습니다. 부트 스트랩 DropDown의 UL은 없음을 표시하도록 설정되었습니다.

UL을 표시하도록 "수동으로"전환하는 클릭 이벤트를 만들었습니다.

<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 : bool 속성이 있으며 int를 기반으로 다음과 같이 스타일에 대해 displayDDL을 설정하십시오.

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

ngShow 및 ngHide 의 Angular 1 문서에 따르면 ,이 지시어는 css 스타일 display: none !important;을 해당 지시어의 조건에 따라 요소에 추가합니다 (ngShow의 경우 css를 잘못된 값에 추가하고 ngHide의 경우 css를 true 값으로 추가).

Angular 2 지시문 ngClass를 사용하여이 동작을 수행 할 수 있습니다.

/* 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 전에 (하지).

<div [hidden]="myExpression">

myExpression이 true 또는 false로 설정되었을 수 있습니다

부트 스트랩 을 사용하는 경우 다음과 같이 간단합니다.

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

부트 스트랩 4.0에서 클래스 "d-none"= "display : none! important;"

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

이 문제를 겪고있는 다른 사람들에게는 이것이 내가 달성 한 방법입니다.

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

동적으로 HTML 요소에 바인딩 할 수 있습니다.

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

또는

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

컨트롤이 있는 모델 을 바인딩 하고 CSS 를 지정 하는 것처럼 숨김을 사용하십시오 .

HTML :

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

CSS :

[hidden] {
   display: none;
}

이것이 나를 위해 일한 것입니다.

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

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

나를 위해, [hidden]=!var일한 적이 없다.

그래서, <div *ngIf="expression" style="display:none;">

그리고 <div *ngIf="expression">항상 올바른 결과를 제공하십시오.

Angular 문서에는 두 가지 예가 있습니다 https://angular.io/guide/structural-directives#why-remove-rather-than-hide

지시문은 표시 스타일을 none으로 설정하여 원하지 않는 단락을 숨길 수 있습니다.

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

[style.display] = " 'block'"을 사용하여 ngShow를 대체하고 [style.display] = " 'none'"을 사용하여 ngHide를 대체 할 수 있습니다.

이 문제를 해결하는 가장 좋은 방법은 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>  

ng-template 코드 샘플

AngularJS와 함께 제공된 대칭 hidden/ shown지시문을 사용하려면 템플릿을 단순화하기 위해 속성 지시문을 작성하는 것이 좋습니다 (Angular 7로 테스트).

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숨겨진 속성에 XHR 왕복을 발생시키는 컨테이너 구성 요소가 포함 된 경우 속성 지시문을 사용한 주된 이유 는 AngularJS 코드를 Angular로 변환하기위한 것입니다. 내가 사용하지 않는 이유 [hidden]="!myVar"는 종종 다음과 같이 더 복잡하기 때문입니다. [hidden]="!(myVar || yourVar) && anotherVar" - yes I can invert that, but it is more error prone.[표시된]`은 생각하기가 더 쉽습니다.

버튼에 div를 숨기고 표시하려면 각도 6을 클릭하십시오.

HTML 코드

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

이것은 나를 위해 작동하며 angular6에서 ng-hide 및 ng-show를 바꾸는 방법입니다.

즐겨...

감사