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.
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
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>
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');
}
}
Créez un composant de chargement paresseux (sous forme d'URL) et mettez votre URL dans
window.open('url', 'window name', 'settings')
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', '');