Saltar al contenido

¿Cómo abrir un componente Angular en una nueva pestaña?

Ya no necesitas indagar más por todo internet ya que has llegado al sitio exacto, contamos con la respuesta que quieres encontrar sin complicaciones.

Solución:

Sé que esta es una publicación anterior, pero dado que este es el primer resultado cuando busca “cómo abrir un componente angular en una nueva pestaña/ventana”, quería publicar una respuesta.

Si crea una ruta para el componente y carga la ruta en una nueva pestaña, terminará reiniciando la aplicación nuevamente.

Entonces, si desea abrir un componente angular sin arrancar toda la aplicación, puede hacerlo usando portales angulares. También puede pasar datos fácilmente entre la ventana principal y la secundaria.

Hace poco tuve este requisito y no pude encontrar ningún recurso completo al respecto, así que redacté un artículo al respecto.

https://medium.com/@saranya.thangaraj/open-angular-component-in-a-new-tab-with-bootstrapping-the-whole-app-again-e329af460e92?sk=21f3dd2f025657985b88d6c5134badfc

Aquí hay una demostración en vivo de la aplicación de ejemplo

Puede crear un enrutamiento para DetailViewComponent y “”

En su enrutamiento:


    path: 'detailed/:id',
    component: DetailedViewComponent

Y después de eso en TypeScript de SimpleListComponent:

public detailedPath;
ngOnInit() 
     this.detailedPath = window.location.origin + '/detailed/';

En su Html de SimpleListComponent:


En TypeStript de DetailViewComponent:

public id;
constructor(private routeParams: ActivatedRoute) 


ngOnInit() 
    this.routeParams.params.subscribe(params => 
      this.id = parseInt(params['id']);
    );
    //Some logic to get the details of this id

Reseñas y calificaciones del post

Si crees que te ha sido útil nuestro artículo, sería de mucha ayuda si lo compartes con más programadores de esta manera contrubuyes a extender nuestro contenido.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *