Est-il possible d'exécuter une application Angular 2 plusieurs fois dans une seule page?

Je suis en train de migrer des formulaires Web asp.net vers Angular 4. Je le fais pas à pas. Remplacer une pièce et la mettre en production. Je rencontre un problème avec le chargement de la même application Angular plusieurs fois dans la page. Par exemple avec le codeEst-il possible d'exécuter une application Angular 2 plusieurs fois dans une seule page?

<root tag="table-ep-component" data="5800"></root> 
<root tag="table-ep-component" data="3333"></root>

Il n'y a qu'une seule application chargée dans la page - la première. Comment puis-je les faire travailler tous les deux? Toutes les suggestions sont les bienvenus

Source

2017-08-26 IAfanasov

Pourquoi avez-vous besoin de la même application plusieurs fois plutôt que du même composant plusieurs fois dans une même application? – jonrsharpe

Le balisage de la page principale est généré par les formulaires web asp.net jusqu'à présent et nous ne sommes pas proches de la migration complète vers Angular4. Les formulaires Web Asp.net indiquent que ce composant devrait être à cet endroit. Certains composants sont des applications Angular4. Et parfois, il devrait y avoir plusieurs composants Angular4 dans des pages différentes à des endroits différents. N'ont pas trouvé d'autre approche de la vie réelle pour migrer des formulaires Web à Angular pas à pas et ne peuvent pas migrer en une seule étape - trop de travail pour une étape. – IAfanasov

Vous pouvez rendre l'application une seule fois à la première demande et y placer le composant requis. Lorsque cette partie n'est pas nécessaire, vous masquez la balise et travaillez avec d'autres parties du système. La prochaine fois que vous avez besoin d'une forme angulaire, vous montrez le contenant racine et mettez-y une autre forme. Qu'est-ce que tu penses? Juste des pensées, je ne sais pas comment faire :) –

Vous pouvez utiliser la méthode Applicationref.bootstrap pour le faire fonctionner:

abstract bootstrap<C>(
    componentFactory: ComponentFactory<C>|Type<C>, 
    rootSelectorOrNode?: string|any): ComponentRef<C>;

Comme on peut le voir cette méthode peut prendre rootSelectorOrNode paramètre afin que nous puissions amorcer deux fois le même composant.

méthode ngDoBootstrap sur votre racine @NgModule peut nous aider à amorcer manuellement notre application:

@NgModule({ 
    declarations: [AppComponent], 
    imports: [BrowserModule], 
    entryComponents: [AppComponent] 
}) 
export class MenuModule { 
    ngDoBootstrap(appRef: ApplicationRef) { 
    const rootElements = document.queryselectorAll('root'); 
    // cast due to https://github.com/Microsoft/TypeScript/issues/4947 
    for (const element of rootElements as any as HTMLElement[]){ 
     appRef.bootstrap(AppComponent, element); 
    } 
    } 
}

Voir aussi:

Source

2017-08-26 15:30:33 yurzui

je ressemble à ce dont j'ai besoin.à l'exception de ngDoBootstrap ne pas appelé.placed console.log où Je compile avec angulaire CLI en mode de production avec AoT.Enquêter pourquoi ne l'appelle pas – IAfanasov

Vous devez supprimer la propriété bootstrap des métadonnées NgModule – yurzui

Est-il possible d'exécuter une application Angular 2 plusieurs fois dans une seule page?

Répondre

Questions connexes