javascript - change - title html

Ignorantes angulares ocultos

Question

Estoy tratando de usar la propiedad Oculta en Angular2 y cuando incluyo un estilo que altera la visualización del DIV, la propiedad oculta se ignora.

Cuando se ejecuta el código siguiente, se muestran los dos divs. Cuando elimino la clase .displayInline, el primer DIV se oculta y el segundo se muestra (como se esperaba).

¿Puedo usar Hidden y mostrar CSS juntos?

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

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

Answer 1

Me enfrenté a un problema similar con la clase btn de bootstrap

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

Resolví esto agregando

[hidden] {
display: none;
}

Al final de la hoja de estilo CSS utilizo globalmente. Esto está resuelto el problema por ahora.

Answer 2

Nota: el valor predeterminado de <span> para "mostrar: en línea", es posible que desee utilizarlos en su lugar.

Actualmente las clases anulan [oculto]. Estoy de acuerdo, esto no es tan efectivo como ng-hide / ng-show y espero que se solucione en futuras versiones de angular2. Actualmente es un tema abierto en el repositorio Angular2 .

Puede superar el problema simplemente envolviendo su elemento [oculto] con la clase.

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

Answer 3

Puede usar style.display lugar de hidden si necesita un control más preciso sobre la visibilidad.

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