Di que tengo lo siguiente
const routes = [ { path: 'product/:id', component: ProductDetailsComponent, } { path: 'search', component: SearchResultsComponent, } ]Ahora di
product/1 - es una película renderizada por DigitalMediaComponent
product/2 - es decir un televisor por ProductDetailsComponent
product/3 - es un paquete de lavadora/secadora, presentado como un BundleComponent
product/4 - es una colección de colchones, esto incluye, un colchón, marcos, fundas, sábanas, almohadas, y una vez puede elegir una cantidad de cosas, color, tamaños, cantidad de hilos y demás antes de comprar
product/5 : es un producto automotriz, por ejemplo, un neumático, por lo que se convierte en un componente de TireComponent : necesita un módulo de ajuste, con una selección de año/marca/modelo/equipamiento y muchas otras personalizaciones antes de que se pueda comprar
Y la lista continúa.
Ahora, obviamente, hay algunos componentes que se reutilizan entre algunos de estos, pero en general son muy diferentes entre sí. Así que quiero cargar (o descargar) de forma diferida los archivos javascript (y css) que contienen estos componentes, no necesito MoviePreviewComponent cuando muestre los neumáticos.
He leído muchos ejemplos y todos hablan de un caso muy simple de relación uno a uno entre la ruta y el componente, como
{ path: 'product/:id', loadChildren: 'product/ProductDetailsComponent' } or { path: 'product/:id', loadChildren: () => System.import('./product/ProductDetailsComponent').then(mod => mod.default) }¿Hay alguna manera en que pueda
System.import('...') para descargar el módulo de forma diferida No quiero navegar a un componente intersticial y cargar desde allí porque cuando el usuario hace clic en un producto desde los resultados de búsqueda (o desde cualquier otro banner promocional en todo el sitio, que podría o no estar construido con angular 2), y si la página tarda un poco en cargarse, podrían presionar esc y hacer clic en otra cosa. Este es el comportamiento normal del navegador y no quiero perderlo.
Incluso si termino con un componente intersticial, ¿cómo haría para cargar el módulo dinámico?
ngOnInit() { let id = this.route.snapshot.params['id']; fetch('/my/api/' + id) .then(response => response.json()) .then(data => { System.import('./page/' + data.componentType) .then( // then what do I do to register this module with Angular // and replace this in the <router-outlet> }) }Vea si esto ayuda: puede crear un cargador de componentes dinámicos siguiendo este enlace [ https://angular.io/guide/dynamic-component-loader] . Solo tendrá que crear un mapeo de sus identificaciones y componentes. Consulte este plunkr que se proporciona en el artículo [ https://embed.plnkr.co/?show=preview] .
Creo que para un buen diseño intenta hacer algo así:
ngOnInit(): void { this.ServiceOfArray.getArray(id) .then(u => this.showData(u)); } enter code here showData(data: Data) { this.data= data; } Service.class apiEndpoint: "http://localhost:52246/api"; getArray(Id: number): Promise<SomeData> { var url = this.config.apiEndpoint + "/somedata/" + Id; return this.http.get(url) .map(response => response.json() as SomeData) .toPromise(); }