Angular2 Ẩn Bỏ qua

Question

Tôi đang cố sử dụng thuộc tính Ẩn trong Angular2 và khi tôi bao gồm một kiểu làm thay đổi hiển thị DIV, thuộc tính ẩn bị bỏ qua.

Khi mã bên dưới được chạy, cả hai div được hiển thị. Khi tôi xóa lớp .displayHãy nhập DIV đầu tiên bị ẩn và dấu thứ hai được hiển thị (như mong đợi).

Tôi có thể sử dụng Ẩn và CSS hiển thị cùng nhau không?

import {ComponentAnnotation as Component, ViewAnnotation as View, bootstrap, NgIf} from 'angular2/angular2'; 

@Component({ 
    selector: 'hello' 
}) 
@View({ 
    template: `<style>.displayInline{ display:inline }</style><span *ng-if="name">Hello, {{name}}!</span> 
    <div> 
       <div [hidden]="hideDiv1()" class="displayInline">should be hidden.</div> 
       <div [hidden]="hideDiv2()" class="displayInline">should be displayed.</div> 
    </div>`, 
    directives: [NgIf] 
}) 
export class Hello { 
    name: string = 'World'; 
    constructor() { 
     setTimeout(() => { 
      this.name = 'NEW World' 
     }, 2000); 
    } 

    hideDiv1(){ 
     return true; 
    } 

    hideDiv2(){ 
     return false; 
    } 
} 

bootstrap(Hello); 

Repository: https://github.com/albi000/ng2-play

Answer 1

Lưu ý: mặc định <span> 's để "display: inline", bạn có thể muốn sử dụng chúng để thay thế.

Hiện tại, các lớp sẽ ghi đè [ẩn]. Tôi đồng ý, điều này không hiệu quả như ng-hide/ng-show và tôi hy vọng nó sẽ được sửa trong các phiên bản tương lai của angular2. Hiện tại là an open on issue on the Angular2 repo.

Bạn có thể khắc phục sự cố bằng cách chỉ cần gói phần tử [ẩn] của bạn với lớp học.

<span class="someClass"> 
    <span [hidden]="hideDiv1()">should be hidden.</span> 
</span> 

Answer 2

Bạn có thể sử dụng style.display thay vì hidden nếu bạn cần kiểm soát nhiều hạt mịn trên tầm nhìn.

<div [style.display]="active?'inherit':'none'"></div> 

Answer 3

tôi phải đối mặt với vấn đề tương tự với lớp btn của bootstrap

<button [hidden]="!visible" class="btn btn-primary">Click</button> 

tôi giải quyết điều này bằng cách thêm

[hidden] { 
    display: none; 
} 

vào cuối css stylesheet tôi sử dụng trên toàn cầu. Điều này đã giải quyết được vấn đề ngay bây giờ.