Básicamente, tengo tantos componentes que se cargan en la carga de la página en diferentes pestañas, ya que he usado sus selectores en el momento del diseño.
Quiero cargar esos componentes a pedido (en Click of tabs).
Aquí está el selector de un componente que quiero cargar dinámicamente. Pero está cargando el html tal como está y no está cargando el componente.
Mi código para cargar un componente es el siguiente:
ngOnInit() { $('#context1 .menu .items') .tab({ cache: true, // faking API request apiSettings: { loadingDuration : 300, mockResponse : function(settings) { var response = { first : ' <div class="Context1"> <div class="title"> <div class="gap" style="height: 20%"></div> <label style="margin-left: 10px"> Charges</label> <div class="ui right floated tiny icon buttons primary" > <button class="tiny ui button">Create New Charges</button> </div> </div> <div class="content"> <app-chargeslistview></app-chargeslistview> </div> </div>', second : 'AJAX Tab Two', third : 'AJAX Tab Three' }; return response[settings.urlData.tab]; } }, context : 'parent', auto : true, path : '/' }); }¡¡Por favor ayuda!!
Está cargando el html y no el componente porque Angular desinfecta la entrada DOM de esa manera.
Lo que deberá hacer es usar algo como componentFactoryResolver para cargar una instancia de un componente dinámicamente. El sitio Angular tiene un artículo que demuestra algo como esto . Hay varias otras implementaciones de componentes de carga dinámicamente, aquí hay algunos enlaces sobre el tema:
https://www.npmjs.com/package/angular2-dynamic-component
http://blog.rangle.io/dynamically-creating-components-with-angular-2/
https://blog.lacolaco.net/post/creacion-de-componentes-dinamicos-en-angular-2/
El tiempo de ejecución de Angular debe poder inyectar una instancia de un componente donde se encuentra el selector, y simplemente insertar HTML en una página en tiempo de ejecución omite el tiempo de ejecución de Angular para manejar ese componente. Si pudiera simplemente insertar cosas en el DOM y ejecutarlo, eso sería una vulnerabilidad de seguridad.
Espero que esto te apunte en la dirección correcta.
EDITAR
Para hacer el enrutamiento de carga diferida con la pestaña de IU semántica (no he probado este código, pero debería estar cerca), debería poder hacer algo como esto:
//TEMPLATE <div class="ui top attached tabular menu"> <a class="item" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}" [routerLink]="['/myFirstRoute']">First</a> <a class="item" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}" [routerLink]="['/mySecondRoute']">Second</a> <a class="item" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}" [routerLink]="['/myThirdRoute']">Third</a> </div> <div class="ui bottom attached tab segment" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}"> <router-oulet></router-oulet> </div> routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}" evalúa la ruta actual y agrega la clase active si la ruta actual coincide con el enlace del enrutador.
Sus rutas podrían tener carga diferida y, de ser así, se verían así:
//ROUTER export const ROUTES: Routes = [ { path: 'myFirstRoute', loadChildren: './routeOne/routeOne.module#RouteOneModule' }, { path: 'mySecondRoute', loadChildren: './routeTwo/routeTwo.module#RouteTwoModule' }, { path: 'myThirdRoute', loadChildren: './routeThree/routeThree.module#RouteThreeModule' } ];La carga diferida haría que esos módulos se empaquetaran por separado en fragmentos, que no serían llamados desde el servidor hasta que se active la ruta. Luego, el fragmento se recuperaría y cargaría.
Espero que te apunte en la dirección correcta.