web-dev-qa-db-fra.com

Composant angulaire dans la fenêtre enfant du navigateur

Dans une application angulaire, je peux créer une fenêtre enfant du navigateur et y afficher un composant angulaire prédéfini. 

Clarification : Je ne cherche pas de solution de dialogue modal.

angularbrowsercomponentsangular6childwindow
10
Shrikey

Dans le cas où vous utilisez window.open pour la fenêtre enfant afin deshow un composant angulaire que cette fenêtre devrait charger une website qui Utilise. Angular cela signifie que vous créez plus dans votre propre application un enfant Route spécial pour cela page et vous ouvrez votre propre application à cette route spécifique. Si vous avez choisi cette solution, prenez en compte la taille de votre application Cette solution fonctionne correctement si vous utilisez le routage asynchrone. Ainsi, lorsque vous ouvrez le app dans une nouvelle fenêtre, vous téléchargerez angular + other core libs en utilisant et + js for that specific route.

Une autre option est que, sur votre serveur, vous créez une autre application angulaire Avec seulement ce contenu et que vous ayez 2 applications sur le même serveur desserviAt une URL différente dans ce cas, vous devez créer une nouvelle application angulaire Qui ne contient que ce contenu spécifique

4
Nicu

Vous pouvez le faire en utilisant un lien avec l'attribut target="_blank"

example.component.html 

<a [routerLink]="['/route-to-your-component']" target="_blank">
  Open the component in a new tab
</a>
0
Nicolas Roehm

J'avais déjà atterri dans ce message auparavant, donc si quelqu'un essayait toujours de restituer un composant chargé dynamiquement sur différentes fenêtres sans exécuter une nouvelle application, voici comment je l'ai fait:

export class ChildLoaderComponent implements OnInit, AfterViewInit {
  constructor(private r: ComponentFactoryResolver, private viewContainerRef: ViewContainerRef) {}
public windowReference: any;
  ngAfterViewInit() {
    setTimeout(() => {
    //create the component dynamically
    const factory = this.r.resolveComponentFactory(AChildComponent);
    const comp: ComponentRef<AChildComponent> = 
    this.viewContainerRef.createComponent(factory);
    //in case you also need to inject an input to the child, 
    //like the windows reference 
    comp.instance.someInputField = this.windowReference.document.body;
    //add you freshly baked component on the windows
    this.windowReference.document.body.appendChild(comp.location.nativeElement);
  });
}

ngOnInit() {
  //create the windows and save the reference       
  this.windowReference = window.open('', '_blank', 'toolbar=0,width=800,height=400');
}

}

0
RowdyArg

Créez un composant de chargement paresseux (sous forme d'URL) et mettez votre URL dans

window.open('url', 'window name', 'settings')
0
Akhi Akl

Vous pouvez essayer de donner des noms à vos différentes fenêtres. Cela ouvrira chaque nouvelle fenêtre avec le nom spécifié.

window.open('url', 'window 1', '');
window.open('url', 'window 2', '');
0
HardRocker