Angular 2+의 ngShow 및 ngHide는 무엇입니까?

Angular 2+의 ngShow 및 ngHide는 무엇입니까?

특정 조건에서 보이고 싶은 여러 요소가 있습니다.

각이 져 있습니다.JS라면 글을 쓰겠어요

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

Angular 2+에서는 어떻게 해요?

»는 다음과 같습니다.hidden속성을 사용할 수 있습니다.

[hidden]="!myVar"

참고 항목입니다.

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

문제들

hidden하지만 에는 몇 가지 문제가 있습니다. 는 에 CSS에 대한 CSS와 충돌할 수 있기 때문입니다.display소유물.

어떻게 하는지 보세요.somePlunker 예제는 스타일을 가지고 있기 때문에 숨겨지지 않습니다.

: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또는 속성을 제거하면 실제로 요소가 표시됩니다.

용용을 사용합니다.{{}}또한 식을 문자열로 변환하여 예상대로 작동하지 않습니다.

만만바 with with with with with with with with with with with로만 묶습니다.[]이 동작은 기대대로 될 것입니다.false이렇게 할당이 됩니다.false대신해서요."false"요.

*ngIfvs »[hidden]

*ngIfDOM을 사용하는 동안 DOM에서 컨텐츠를 효과적으로 제거합니다.[hidden]는 을 수정합니다.display브라우저에 내용을 표시하지 않도록 지시할 뿐이지만 DOM은 여전히 내용을 포함합니다.

이렇게 하다를 사용하세요.[hidden]이겁니다.

[hidden]="!myVar"

아니면 '먹다'를 사용해도 됩니다.*ngIf

*ngIf="myVar"

요소를 표시하거나 숨기는 두 가지 방법이 있습니다.다른 점이 있다면, '다르다' 입니다.*ngIfDOM을 사용하는 동안 DOM에서 를 제거합니다.[hidden]는 브라우저에 CSS를 사용하여 요소를 표시하거나 숨기도록 지시합니다.display에에에에 DOM을 사용하세요.

저는 같은 상황에 처해 있습니다. 저의 경우 요소가 플렉시블 컨테이너였던 경우와 다릅니다.당신의 경우가 아니라면 쉬운 작업이 될 수 있습니다.

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

이게 제게 효과가 있었어요.

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

<div [hidden]="myExpression">

myExpression을 true 또는 false로 설정할 수 있습니다.

이 문제를 우연히 발견하게 된 다른 사람을 위해, 저는 이렇게 해냈습니다.

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>

ngShow 및 ngHide의 Angular 1 설명서에 따르면 이러한 지시문은 모두 css 스타일을 추가합니다.display: none !important;해당 지시어의 조건에 따라 요소로 이동합니다(ngShow의 경우 false 값에 css를 추가하고 ngHide의 경우 true 값에 css를 추가합니다).

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 angular1 ngHide -->
<div ng-hide="ngHideVal"> I'm Angular1 ngHide... </div>

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

★★★★★★★★★★★★★★★★★★★★에 주목해 주세요.show에서 우리는 Angular2를 추가해야 합니다.!ngShowVal 이전) 및 (ngShowVal 전전 (전 이 ( 이 ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( (hideAngular2의 동작은 추가할 필요가 없습니다.!ngHideVal.(ngHideVal 전입)보다 앞에 있습니다

스타일이 없음으로 표시되는 경우 ngStyle 지시문을 사용하여 디스플레이를 직접 수정할 수 있습니다. 부트스트랩 드롭다운에 대해 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를 기준으로 디스플레이를 설정합니다.스타일에 대한 DDL은 다음과 같습니다.

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

모든 모델을 컨트롤로 바인딩하는 것처럼 hidden을 사용하고 css를 지정합니다.

HTML: 을 참조하십시오.

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

CSS: 네, 그렇습니다.

[hidden] {
   display: none;
}

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

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

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

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

전 한번도 일을 한 적이 없어요.

자, 그럼 ㅇㅇㅇㅇ는요.<div *ngIf="expression" style="display:none;">

그리고 ㅇㅇㅇㅇㅇㅇ.<div *ngIf="expression">이겁니다.

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

문제는 <ng-timeout *ngIf="myVar">를 사용하여 버튼을 클릭할 때 매트 테이블을 표시하거나 표시하는 것이었습니다.테이블의 '로드'는 2-3초에 300개의 레코드로 매우 느렸습니다.

데이터는 ngOnInit()의 구독을 사용하여 로드되며 템플릿에서 사용할 수 있고 사용할 준비가 되었지만 행 수가 증가함에 따라 템플릿의 테이블 '로드' 속도가 점점 느려졌습니다.

솔루션은 *ngIf를 다음과 같이 교체하는 것이었습니다.

<div [style.display]="activeSelected ? 'block' : 'none'">

. 이제 버튼을 클릭하면 테이블이 즉시 로딩됩니다.

용 using를 사용해서.[ngStyle]

[ngStyle]="{'visibility': my-flag ? 'visible' : 'hidden'}"

[hidden]="yourVariable" OR [style.display]="!isShow? '블록': '없음'입니다.

두 가지 옵션이 있습니다.

첫 번째 옵션입니다.

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

두 번째 옵션입니다.

myVarible은 부울일 수 있습니다.

[hidden]="!myVarible"

다음을 사용하여 이 문제를 해결하는 가장 좋은 방법입니다.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-code 코드입니다.

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를 대체할 수 있습니다.

대칭을 사용하고 싶다면요hidden/shownAngular를 지시합니다.JS는 다음과 같이 템플릿을 단순화하는 속성 지시문을 작성하는 것이 좋습니다(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>

필요 사항을 추가하려면 다음과 같은 접두사도 지정해야 합니다.[acmeShown] 대 대 대 대 대 대 대 대 대 대 대 대 대 대입니다.[shown]...을(를) 참조하십시오.

제가 가가 a a a a a a a a a a a a a a를 사용한 주된 이유는요.shownattribute directive는 Angular를 변환하기 위한 것입니다.숨겨진 컨텐츠에 XHR 왕복의 원인이 되는 컨테이너 구성 요소가 포함된 경우 JS 코드는 Angular -AND-로 지정됩니다.제가 그냥 쓰지 이유는요.[hidden]="!myVar" 정도면 더 복잡할 수도 있죠, '자꾸요'처럼요.[hidden]="!(myVar || yourVar) && anotherVar" - yes I can invert that, but it is more error prone.[으]ㄹ 거예요.

버튼에서 div를 숨기거나 표시하려면 각도 6을 클릭합니다.

HTML 코드입니다.

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

AppComponent.ts 코드입니다.

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

이것은 나에게 효과가 있고 이것은 ng-hide와 ng-show를 angular2+로 대체하는 방법입니다.

이 답변은 .ts 파일에서 볼 수 있는 요소를 숨기는 방법을 모르는 사용자를 위한 것입니다.

TS 파일입니다.

export class PostTweetComponent implements OnInit {
isHidden:boolean = false;
  hide(){
    this.isHidden = true;
  }
  unHide(){
    this.isHidden = false;
  }
}

HTML 파일입니다.

<div [hidden]="isHidden">stuff</div>
<button (click)="hide()">Hide</button>
<button (click)="unHide()">UnHide</button>

언급URL : https://stackoverflow.com/questions/35578083/what-is-the-equivalent-of-ngshow-and-nghide-in-angular-2 입니다.