links - Componente angular 2 con múltiples vistas.

router en angular 7

Question

¿Cómo puedo dar a un componente Angular 2 múltiples vistas / plantillas de vista?

¿Tengo que usar ng-content? Que no es exactamente la función que quiero. Tal vez una propiedad de componente que especifique la url de la plantilla, pero ¿cómo cambiar la vista / plantilla en la clase de componente?

Answer 1

Así es como lo manejé, aunque no me gusta la solución:

• Tengo un componente myComponent que se procesa en el selector: ''my-component'' .
• En mi aplicación principal, creo dos variables target:string = ''template-one'' y target2:string = ''template-two'' .
• Creo dos instancias del componente en la plantilla de mi aplicación, que se parece a <my-component [target]="target"></my-component> y <my-component [target]="target2"></my-component> .
• Por último, en la plantilla para my-component , tengo dos bloques de marcado diferentes, el primero para cuando target === "template-one" y el segundo para cuando target === "template-two" . En el elemento html externo para uno pongo *ngIf="target === ''template-one''" y en el elemento html externo para el otro pongo *ngIf="target === ''template-two''" que efectivamente Crea un tenedor en la renderización.

Puedo publicar de nuevo si se me ocurre algo mejor, pero por ahora esto es lo mejor que puedo hacer con lo que me dio Angular 2.

Answer 2

El contenido de ng se utilizará para definir dónde desea que vaya el contenido de su componente, a continuación se ofrece una explicación:

Supongamos que define su propio componente con su plantilla y un selector ''my-cmp'', si lo usa como tal: <my-cmp><div>content</div></my-cmp> , el div dentro de su componente debe ir a algún lugar, eso es lo que define en la plantilla cuando implementa my-cmp. Diga: <h1>my component title</h1><ng-content></ng-content> su div irá donde se coloca el contenido ng.

Ahora, si desea tener varias vistas, creo que es un problema de diseño, y probablemente serían dos componentes diferentes, y luego un contenedor principal los contendría a ambos. Este contenedor primario se podría comunicar con su servicio y dar a sus componentes secundarios el modelo que necesitan para mostrarse. Podrían emitir un evento cuando el usuario hace algo, que el padre detecta, desencadena una llamada de servicio y le envía el modelo actualizado a través del enlace de datos.

¿O si desea mostrar uno u otro, tal vez se pueda manejar con rutas?

O una última forma sería ng-if, si tiene un cierto estado en su modelo y luego muestra un componente secundario, de lo contrario muestre el otro.

Si eres un poco más específico acerca de la necesidad que tienes, podría burlarme de algún código.

Answer 3

Hoy también piensa en este problema. Yo "invento" esta solución http://plnkr.co/edit/FYVwbBwSnqWRcvAVz3wh?p=preview . Puede ser que te ayude en el futuro.

export class MyModel {
  lala;
  constructor() {
    this.lala = "llaala";
  }
  appendToLala(param: string){
    this.lala += param;
  } 
}

@Component({
  selector: ''c1'',
  template: `<div><h2>Hello {{lala}}</h2></div>`,
})
export class Component1 extends MyModel {
  constructor(){
    super();
    this.appendToLala(" bebebe");
  }
}


@Component({
  selector: ''c2'',
  template: `<div><h2>Hello {{lala}}</h2></div>`,
})
export class Component2 extends MyModel {
  constructor(){
    super();
    this.appendToLala(" nenene");
  }
}

La idea es crear un modelo de componente abstracto y usarlo como padre de @ Component. Y si es necesario, puede crear un árbol a partir de modelos y la clase @Component siempre será una hoja en este árbol.

Answer 4

No estoy seguro de si NG2 tiene una forma integrada para soportar esto.

Parece que necesitas dos componentes, pero tienes uno, y estás tratando de encontrar la manera más rápida. Pero la mejor solución será dividir la lógica complicada en diferentes estructuras (como servicios, otros módulos, etc.). La mejor manera de hacerlo es la estructura con la que será cómodo trabajar. Y cuando construyas esta estructura, no necesitarás múltiples html para la directiva.

Answer 5

Si simplemente intenta cambiar lo que se muestra en una vista para una sesión de un solo usuario en función del valor de una variable en su componente, podría considerar la posibilidad de contener su html en diferentes elementos div y usar ngIf o ngSwitch para alternar entre ellos.

Un ejemplo rápido y barato, si tiene un booleano variado llamado "cargando" en su componente, puede cambiar entre lo que se muestra así:

<div *ngIf="loading">
    <h1>Loading...</h1>
</div>

<div *ngIf="!loading">
...
</div>