Estoy mirando el código fuente de *ngIf :
@Input() set ngIf(condition: any) { if (condition && !this._hasView) { this._hasView = true; this._viewContainer.createEmbeddedView(this._template); } else if (!condition && this._hasView) { this._hasView = false; this._viewContainer.clear(); } }¿Puedo tener un componente que haga lo siguiente?
@Component({}) class MyComponent{ constructor ( public _template : TemplateRef, public _viewContainer : ViewContainerRef) { } onSomeButtonClick(condition){ if(condition){ removeMyView(); }else{ putTheViewBackIfItsRemoved(); } } } Intentar usar la lógica de ngIf dentro del componente no funciona, lo que creo que se debe a que viewContainerRef para el componente está vacío
EDITAR :
Solo para mencionar que no estoy buscando ocultar la vista, solo quiero eliminarla del DOM.
En otras palabras, ¿podemos hacer algo como ngIf de elementos host? Sé que no puede poner una directiva en host , por eso pensé que tal vez con ViewContainer y TemplateRef podría lograr lo mismo.
La otra cosa es que, habiendo trabajado con Angular y creando componentes dinámicos, ahora la única forma es usar ViewContainerRef para crear un nuevo componente en DOM; mi pregunta importante es, ¿Angular crea componentes de la misma manera?
En caso afirmativo, ¿no podemos acceder de alguna manera a ese contenedor que contiene los componentes?
Para aquellos que recién comenzaron a aprender Angular y quieren ayudar aquí (gracias por eso), debo decir que sinceramente sé cómo usar ngIf dentro de mi plantilla:
Sé qué es un ngIf y qué hace:
pero :
<div *ngIf="condition"></div>no es lo que quiero decir, simplemente porque esto eliminará potencialmente lo que está dentro de mi plantilla, y tengo que envolver todo dentro de ese div para que funcione, que no es lo que quiero.
Quiero borrar la plantilla por completo con ngIf ing el interior.
ACTUALIZAR :
Para dar alguna aclaración:
En otras palabras, es como tener un ngIf en el host:
@Component({ host:{ '*ngIf':'shouldBeRemoved' } }) class MyComponent{ Sé que no puede poner ngIf en el host porque su directiva y el host solo compilan valores estáticos, por eso pregunto si hay una manera de manejarlo con viewContainerRef o algo así.
Por favor, sepa confundirse al poner ngIf dentro de la plantilla, eso no es lo que quiero.
Gracias por tu paciencia de nuevo.
No existe una forma oficial de eliminar una plantilla desde el interior de un componente y para mí tiene sentido. Si quitas tu plantilla, quién se va a encargar de volver a colocarla. Esto funciona en ngIf porque ngIf primero crea una template detrás de la escena y luego incrusta el elemento dentro de ella, por lo que tiene una referencia al elemento incrustado, por lo tanto, puede eliminarlo o volver a colocarlo.
Esto es lo que estás buscando:
@Component({ selector: 'your-selector', template: '<template [ngIf]="showView"> Here is my component template </template> ', }) class MyComponent{ showView: boolean = true; onSomeButtonClick(condition){ if (condition) { this.showView = false; } else { this.showView = true; } } } Ahora, solo agregue un botón con una devolución de llamada onClick para llamar a onSomeButtonClick con algún parámetro y listo
Solo puedo responder en base a mi comprensión limitada de cómo funcionan angular2 y mecanografiado.
No.
A nivel de mecanografiado, la plantilla y la clase parecen partes separadas. Sin embargo, la plantilla es en realidad parte de la declaración de clase.
Una vez que se inicia una clase de componente, todos esos enlaces de variables de plantilla, directivas, etc., se convierten en partes dentro del objeto del componente.
Cambiar, incluida la eliminación (lo que pide la pregunta), la plantilla básicamente significa volver a escribir la clase, será necesario volver a transcribirla y luego volver a compilarla/reiniciarla con el motor angular2.
Desde el punto de vista de la programación, esto es posible, especialmente con objetos javascript, que pueden tener un método para eliminar a todos los hermanos y reiniciar todo. Sin embargo, no veo una forma angular2 para que un componente se reinicie .
Actualmente, la técnica más cercana que conozco es el componente dinámico, del cual el componente principal puede crear y destruir. Y se menciona en la pregunta.
( reiniciar un componente es casi lo mismo que un componente dinámico, la diferencia se inicia interna o externamente).