diff --git a/npm/ng-packs/packages/core/src/lib/components/replaceable-route-container.component.ts b/npm/ng-packs/packages/core/src/lib/components/replaceable-route-container.component.ts
index 70332eeddf..af4805177d 100644
--- a/npm/ng-packs/packages/core/src/lib/components/replaceable-route-container.component.ts
+++ b/npm/ng-packs/packages/core/src/lib/components/replaceable-route-container.component.ts
@@ -1,18 +1,43 @@
-import { Type, Component, OnInit } from '@angular/core';
-import { Router, ActivatedRoute } from '@angular/router';
+import { Component, OnDestroy, OnInit, Type } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Store } from '@ngxs/store';
+import { distinctUntilChanged } from 'rxjs/operators';
+import { ABP } from '../models/common';
+import { ReplaceableComponents } from '../models/replaceable-components';
+import { ReplaceableComponentsState } from '../states/replaceable-components.state';
+import { takeUntilDestroy } from '../utils/rxjs-utils';
@Component({
selector: 'abp-replaceable-route-container',
template: `
-
+
`,
})
-export class ReplaceableRouteContainerComponent implements OnInit {
+export class ReplaceableRouteContainerComponent implements OnInit, OnDestroy {
defaultComponent: Type;
- constructor(private route: ActivatedRoute) {}
+ componentKey: string;
+
+ externalComponent: Type;
+
+ constructor(private route: ActivatedRoute, private store: Store) {}
ngOnInit() {
- this.defaultComponent = this.route.snapshot.data.component.default;
+ if (!this.defaultComponent) {
+ this.defaultComponent = this.route.snapshot.data.component.default;
+ }
+
+ if (!this.componentKey) {
+ this.componentKey = (this.route.snapshot.data.component as ABP.ComponentData).key;
+ }
+
+ this.store
+ .select(ReplaceableComponentsState.getComponent(this.componentKey))
+ .pipe(takeUntilDestroy(this), distinctUntilChanged())
+ .subscribe(({ component } = {} as ReplaceableComponents.ReplaceableComponent) => {
+ this.externalComponent = component;
+ });
}
+
+ ngOnDestroy() {}
}