Angular Replace Component #3667

2 Answer(s)

• 

  0

  muhammedaltug created one year ago

  Hello,

  Can you give code examples to understand your question clearly? Created components by ABP Suite are page components(Eg: BookComponent). This component is loaded by routing. If you want the replace this component you need to configure generated routing.module like the following way;

  {
      path: '',
      component: BookComponent,
      canActivate: [AuthGuard, PermissionGuard],
   }
  

  to

  {
      path: '',
      component: RouterOutletComponent,
      canActivate: [AuthGuard, PermissionGuard],
      children: [
        {
          path: '',
          component: ReplaceableRouteContainerComponent,
          data: {
            replaceableComponent: {
              key: 'YOUR_COMPONENT_KEY',
              defaultComponent: BookComponent,
            } as ReplaceableComponents.RouteData<BookComponent>,
          },
        },
      ],
    },
  

  in your app component ts or you can do the same thing in APP_INITIALIZER provider factory.

  import { ReplaceableComponentsService } from '@abp/ng.core';
  import { Component } from '@angular/core';
  
  
  @Component({
    selector: 'app-root',
    template: `
      <abp-loader-bar></abp-loader-bar>
      <abp-dynamic-layout></abp-dynamic-layout>
    `,
  })
  export class AppComponent {
    constructor(private replaceableComponent: ReplaceableComponentsService) {
      this.replaceableComponent.add({
        key: 'YOUR_COMPONENT_KEY',
        component: YOURCOMPONENT,
      });
    }
  }
  
  

  Save Cancel
• 

  0

  guven.uysall created one year ago

  Hi muhammed, Your example is perfect.This method works for me.

  Thanks.

  Save Cancel