1

¿Cómo usar un componente de formulario complejo (con servicios, inyecciones, etc) como un modal sin tener que poner su html en el componente padre?

Mi estructura es la siguiente:

src
----- app.component.ts
----- app.component.html
----- modals/
------------- modal_one.ts
------------- modal_one.html
------------- modal_other.ts
------------- modal_other.html

¿Cómo utilizo < modal_one > sin ponerlo en el html de app.component?

6
  • Disculpa, si entiendo, quieres es colocar la ruta del html, mas no poner todo el código de tu vista html en el fichero TypeScript? el 28 feb. 2017 a las 19:30
  • Quiero mas bien utilizarlo como un servicio. Donde por ejemplo tengo mi componente padre, y en algún momento hacer modal.abrir() el 28 feb. 2017 a las 19:45
  • No trabajo con bootstrap, pero asumo que crean el modal en un fichero .html y luego llamarlo mediante el llamado de un click debe suceder, supongo que ya tiene las funciones predefinidas para eso el 28 feb. 2017 a las 19:51
  • Recordando que este trabaja con componentes el 28 feb. 2017 a las 19:52
  • Hacer algo así, si es posible: modal.open ( Mycomponent ); el 28 feb. 2017 a las 20:03

2 respuestas 2

1

Buenas,

Puedes usar componentFactoryResolver para ello, y crear e inyectar componentes dinamicamente desde Typescript.

Ademas, te aconsejaria usar un framework pensado para angular 2, ya que la version normal de bootstrap esta basada en el arbol DOM y en jQuery, y para nada es el mismo sistema que usar angular 2 ya que el DOM va cambiando con cada interaccion del routing.

Enlace para el componentFactoryResolver:

https://medium.com/@tudorgergely/injecting-components-dynamically-in-angular-2-3d36594d49a0#.xauq6bc83

Enlace para ng-bootstrap for Angular 2:

https://ng-bootstrap.github.io/#/components/modal

Espero que te sirva ;)

0

Yo dividí mi componente en dos partes; una contiene el modal en sí (el padre) pero carga la forma en otro (componente hijo), de esta manera no cargas todo el contenido en un solo. No sé si te sirva pero si quieres utilizar modales en angular sin tanto problema, ésta debería ser tu mejor solución.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.