diff --git a/examples/app2/src/app/app.component.ts b/examples/app2/src/app/app.component.ts
index f208081..7441f20 100644
--- a/examples/app2/src/app/app.component.ts
+++ b/examples/app2/src/app/app.component.ts
@@ -1,10 +1,12 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, HostBinding } from '@angular/core';
@Component({
selector: 'app2-root-container',
template: ''
})
export class AppComponent implements OnInit {
+ @HostBinding(`class.thy-layout`) isThyLayout = true;
+
constructor() {}
ngOnInit() {}
diff --git a/examples/app2/src/app/root/root.component.ts b/examples/app2/src/app/root/root.component.ts
index de5fc82..11e338e 100644
--- a/examples/app2/src/app/root/root.component.ts
+++ b/examples/app2/src/app/root/root.component.ts
@@ -1,6 +1,6 @@
import { Component, HostBinding, ComponentFactoryResolver, Injector, ApplicationRef } from '@angular/core';
@Component({
- selector: 'app2-root-container',
+ selector: 'app2-root',
templateUrl: './root.component.html',
styleUrls: ['./root.component.scss']
})
diff --git a/examples/common/cache.ts b/examples/common/cache.ts
new file mode 100644
index 0000000..9d73500
--- /dev/null
+++ b/examples/common/cache.ts
@@ -0,0 +1,82 @@
+import { helpers } from 'ngx-tethys/util';
+const { isString, isNumber } = helpers;
+const NUMBER_PREFIX = `____n____`;
+
+const SupportedStorage = window && window.localStorage;
+const storageSource = window.localStorage || window.sessionStorage;
+
+const cache = {
+ /**
+ * set item to local storage
+ *
+ * @example
+ * cache.set('key1', 'key1-value');
+ * cache.set('key1', 10);
+ * cache.set('key1', { id: 1, name: 'name 1'});
+ * cache.set('key1', 'key1-value', false);
+ * @param key string
+ * @param value string | number | object
+ */
+ set(key: string, value: TValue) {
+ const itemValue = isString(value)
+ ? value
+ : isNumber(value)
+ ? `${NUMBER_PREFIX}${value}`
+ : JSON.stringify(value);
+ if (SupportedStorage) {
+ storageSource.setItem(key, itemValue as string);
+ }
+ },
+ /**
+ * get item from local storage
+ *
+ * @example
+ * cache.get('key1');
+ * cache.get('key1');
+ * cache.get('key1');
+ * cache.get('key1');
+ * cache.get('key1', false);
+ *
+ * @param key string
+ */
+ get(key: string): TValue {
+ if (SupportedStorage) {
+ const value = storageSource.getItem(key);
+ if (value) {
+ try {
+ const result = JSON.parse(value);
+ return result;
+ } catch (error) {
+ if (isString(value) && value.includes(NUMBER_PREFIX)) {
+ return parseInt(value.replace(NUMBER_PREFIX, ''), 10) as any;
+ } else {
+ return value as any;
+ }
+ }
+ } else {
+ return undefined;
+ }
+ } else {
+ return undefined;
+ }
+ },
+ /**
+ * remove key from storage
+ * @param key cache key
+ */
+ remove(key: string) {
+ if (SupportedStorage) {
+ storageSource.removeItem(key);
+ }
+ },
+ /**
+ * clear all storage
+ */
+ clear() {
+ if (SupportedStorage) {
+ storageSource.clear();
+ }
+ }
+};
+
+export { cache };
diff --git a/examples/common/index.ts b/examples/common/index.ts
index c640c0b..4871a38 100644
--- a/examples/common/index.ts
+++ b/examples/common/index.ts
@@ -1,2 +1,3 @@
export * from './app-root-context';
export * from './module';
+export * from './cache';
diff --git a/examples/portal/src/app/host-container/host-container.component.scss b/examples/common/utils.ts
similarity index 100%
rename from examples/portal/src/app/host-container/host-container.component.scss
rename to examples/common/utils.ts
diff --git a/examples/portal/src/app/app-routing.module.ts b/examples/portal/src/app/app-routing.module.ts
index 8deb553..41c1ba0 100644
--- a/examples/portal/src/app/app-routing.module.ts
+++ b/examples/portal/src/app/app-routing.module.ts
@@ -3,6 +3,7 @@ import { Routes, RouterModule } from '@angular/router';
import { AboutComponent } from './about/about.component';
import { HostContainerComponent } from './host-container/host-container.component';
import { SettingsComponent } from './settings/settings.component';
+import { EmptyComponent } from 'ngx-planet';
const routes: Routes = [
{
@@ -20,31 +21,31 @@ const routes: Routes = [
},
{
path: 'app1',
- component: HostContainerComponent,
+ component: EmptyComponent,
children: [
{
path: '**',
- component: HostContainerComponent
+ component: EmptyComponent
}
]
},
{
path: 'app2',
- component: HostContainerComponent,
+ component: EmptyComponent,
children: [
{
path: '**',
- component: HostContainerComponent
+ component: EmptyComponent
}
]
},
{
path: 'app4',
- component: HostContainerComponent,
+ component: EmptyComponent,
children: [
{
path: '**',
- component: HostContainerComponent
+ component: EmptyComponent
}
]
}
diff --git a/examples/portal/src/app/app.component.html b/examples/portal/src/app/app.component.html
index fac5269..e151cbc 100644
--- a/examples/portal/src/app/app.component.html
+++ b/examples/portal/src/app/app.component.html
@@ -55,6 +55,6 @@
-
+
diff --git a/examples/portal/src/app/app.component.ts b/examples/portal/src/app/app.component.ts
index dc619f7..0a85fc7 100644
--- a/examples/portal/src/app/app.component.ts
+++ b/examples/portal/src/app/app.component.ts
@@ -5,6 +5,7 @@ import { ThyDialog } from 'ngx-tethys/dialog';
import { ADetailComponent } from './a-detail/a-detail.component';
import { ThyConfirmService, ThyNotifyService } from 'ngx-tethys';
import { AppRootContext } from '@demo/common';
+import { CustomSettingsService } from './custom-settings.service';
@Component({
selector: 'app-root',
@@ -20,8 +21,7 @@ export class AppComponent implements OnInit {
}
constructor(
- private router: Router,
- private route: ActivatedRoute,
+ private customSettingsService: CustomSettingsService,
private planet: Planet,
private globalEventDispatcher: GlobalEventDispatcher,
private thyDialog: ThyDialog,
@@ -43,18 +43,19 @@ export class AppComponent implements OnInit {
appRootContext: this.appRootContext
});
- const appHostContainerSelector = '#app-host-container';
- const appHostContainerClass = 'thy-layout';
+ const appHostClass = 'thy-layout';
+ const settings = this.customSettingsService.get();
this.planet.registerApps([
{
name: 'app1',
- host: appHostContainerSelector,
- hostClass: appHostContainerClass,
+ hostParent: '#app-host-container',
+ hostClass: appHostClass,
routerPathPrefix: /\/app1|app4/, // '/app1',
selector: 'app1-root-container',
resourcePathPrefix: '/app1/static/',
- preload: true,
+ preload: settings.app1.preload,
+ switchMode: settings.app1.switchMode,
loadSerial: true,
// prettier-ignore
scripts: [
@@ -70,11 +71,12 @@ export class AppComponent implements OnInit {
},
{
name: 'app2',
- host: appHostContainerSelector,
- hostClass: appHostContainerClass,
- routerPathPrefix: '/app2',
+ hostParent: '#app-host-container',
selector: 'app2-root-container',
- preload: true,
+ hostClass: appHostClass,
+ routerPathPrefix: '/app2',
+ preload: settings.app2.preload,
+ switchMode: settings.app2.switchMode,
// prettier-ignore
scripts: [
'/app2/static/main.js'
diff --git a/examples/portal/src/app/app.module.ts b/examples/portal/src/app/app.module.ts
index ddfb3d1..b8d787d 100644
--- a/examples/portal/src/app/app.module.ts
+++ b/examples/portal/src/app/app.module.ts
@@ -5,16 +5,24 @@ import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgxTethysModule } from 'ngx-tethys';
import { AboutComponent } from './about/about.component';
-import { HostContainerComponent } from './host-container/host-container.component';
import { NgxPlanetModule } from 'ngx-planet';
import { ThyDialogModule, ThyIconRegistry } from 'ngx-tethys';
import { ADetailComponent } from './a-detail/a-detail.component';
import { SettingsComponent } from './settings/settings.component';
import { AppRootContext, DemoCommonModule } from '@demo/common';
+import { FormsModule } from '@angular/forms';
@NgModule({
- declarations: [AppComponent, AboutComponent, SettingsComponent, HostContainerComponent, ADetailComponent],
- imports: [BrowserModule, NgxTethysModule, ThyDialogModule, AppRoutingModule, NgxPlanetModule, DemoCommonModule],
+ declarations: [AppComponent, AboutComponent, SettingsComponent, ADetailComponent],
+ imports: [
+ BrowserModule,
+ FormsModule,
+ NgxTethysModule,
+ ThyDialogModule,
+ AppRoutingModule,
+ NgxPlanetModule,
+ DemoCommonModule
+ ],
providers: [AppRootContext],
bootstrap: [AppComponent],
entryComponents: [ADetailComponent]
diff --git a/examples/portal/src/app/custom-settings.service.ts b/examples/portal/src/app/custom-settings.service.ts
new file mode 100644
index 0000000..5501a48
--- /dev/null
+++ b/examples/portal/src/app/custom-settings.service.ts
@@ -0,0 +1,44 @@
+import { Injectable } from '@angular/core';
+import { cache } from '@demo/common';
+import { SwitchModes } from 'ngx-planet';
+const SETTINGS_KEY = 'custom-settings';
+
+export interface CustomSettingsInfo {
+ app1: {
+ preload: boolean;
+ switchMode?: SwitchModes;
+ };
+ app2: {
+ preload: boolean;
+ switchMode?: SwitchModes;
+ };
+}
+
+const DEFAULT_SETTINGS: CustomSettingsInfo = {
+ app1: {
+ preload: true,
+ switchMode: SwitchModes.coexist
+ },
+ app2: {
+ preload: true,
+ switchMode: SwitchModes.coexist
+ }
+};
+
+@Injectable({
+ providedIn: 'root'
+})
+export class CustomSettingsService {
+ get(): CustomSettingsInfo {
+ const settings = cache.get(SETTINGS_KEY);
+ return settings || JSON.parse(JSON.stringify(DEFAULT_SETTINGS));
+ }
+
+ save(settings: CustomSettingsInfo) {
+ cache.set(SETTINGS_KEY, settings);
+ }
+
+ restore() {
+ cache.set(SETTINGS_KEY, DEFAULT_SETTINGS);
+ }
+}
diff --git a/examples/portal/src/app/host-container/host-container.component.spec.ts b/examples/portal/src/app/host-container/host-container.component.spec.ts
deleted file mode 100644
index 841e5c8..0000000
--- a/examples/portal/src/app/host-container/host-container.component.spec.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { HostContainerComponent } from './host-container.component';
-
-describe('LoadAppComponent', () => {
- let component: HostContainerComponent;
- let fixture: ComponentFixture;
-
- beforeEach(async(() => {
- TestBed.configureTestingModule({
- declarations: [HostContainerComponent]
- }).compileComponents();
- }));
-
- beforeEach(() => {
- fixture = TestBed.createComponent(HostContainerComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
-
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-});
diff --git a/examples/portal/src/app/host-container/host-container.component.ts b/examples/portal/src/app/host-container/host-container.component.ts
deleted file mode 100644
index 0c97c5f..0000000
--- a/examples/portal/src/app/host-container/host-container.component.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
- selector: 'app-host-container',
- template: ''
-})
-export class HostContainerComponent implements OnInit {
- constructor() {}
-
- ngOnInit() {}
-}
diff --git a/examples/portal/src/app/settings/settings.component.html b/examples/portal/src/app/settings/settings.component.html
index ffd13b4..c4d1488 100644
--- a/examples/portal/src/app/settings/settings.component.html
+++ b/examples/portal/src/app/settings/settings.component.html
@@ -1,4 +1,31 @@
-
-
+
diff --git a/examples/portal/src/app/settings/settings.component.ts b/examples/portal/src/app/settings/settings.component.ts
index a700b62..fe76b65 100644
--- a/examples/portal/src/app/settings/settings.component.ts
+++ b/examples/portal/src/app/settings/settings.component.ts
@@ -1,8 +1,9 @@
import { Component, OnInit, HostBinding } from '@angular/core';
import { Router } from '@angular/router';
-import { ThyDialog } from 'ngx-tethys/dialog';
+import { ThyNotifyService } from 'ngx-tethys';
import { ADetailComponent } from '../a-detail/a-detail.component';
import { AppRootContext } from '@demo/common';
+import { CustomSettingsService, CustomSettingsInfo } from '../custom-settings.service';
@Component({
selector: 'app-settings',
@@ -12,15 +13,31 @@ import { AppRootContext } from '@demo/common';
export class SettingsComponent implements OnInit {
@HostBinding(`class.thy-layout-content`) isThyLayoutContent = true;
- constructor(private router: Router, private thyDialog: ThyDialog, public appRootContext: AppRootContext) {}
+ settings: CustomSettingsInfo;
- ngOnInit() {}
+ constructor(
+ public appRootContext: AppRootContext,
+ private customSettingsService: CustomSettingsService,
+ private thyNotifyService: ThyNotifyService
+ ) {}
- toApp2Dashboard() {
- this.router.navigateByUrl(`/app2/dashboard`);
+ ngOnInit() {
+ this.reset();
}
- openADetail() {
- this.thyDialog.open(ADetailComponent);
+ save() {
+ this.customSettingsService.save(this.settings);
+ this.thyNotifyService.success(`Save success`);
+ }
+
+ reset() {
+ this.settings = {
+ ...this.customSettingsService.get()
+ };
+ }
+
+ restore() {
+ this.customSettingsService.restore();
+ this.reset();
}
}
diff --git a/examples/portal/src/styles.scss b/examples/portal/src/styles.scss
index f033e32..81e3d86 100644
--- a/examples/portal/src/styles.scss
+++ b/examples/portal/src/styles.scss
@@ -1,6 +1,11 @@
$layout-content-background: #fff;
$primary: #348fe4;
+$btn-border-radius: 4px;
+$btn-border-radius-lg: 4px;
+$btn-border-radius-sm: 4px;
+$btn-border-radius-xs: 4px;
+
@import 'ngx-tethys/styles/variables.scss';
@import 'ngx-tethys/styles/index.scss';
diff --git a/packages/planet/src/application/planet-application-loader.spec.ts b/packages/planet/src/application/planet-application-loader.spec.ts
index e0a2917..319f4be 100644
--- a/packages/planet/src/application/planet-application-loader.spec.ts
+++ b/packages/planet/src/application/planet-application-loader.spec.ts
@@ -12,7 +12,7 @@ import { PlanetApplicationRef } from './planet-application-ref';
const app1 = {
name: 'app1',
- host: '.host-selector',
+ hostParent: '.host-selector',
selector: 'app1-root-container',
routerPathPrefix: '/app1',
hostClass: 'app1-host',
@@ -30,7 +30,7 @@ const app1 = {
const app2 = {
name: 'app2',
- host: '.host-selector',
+ hostParent: '.host-selector',
selector: 'app2-root-container',
routerPathPrefix: '/app2',
hostClass: 'app2-host',
diff --git a/packages/planet/src/application/planet-application-loader.ts b/packages/planet/src/application/planet-application-loader.ts
index 4b5f533..31391e3 100644
--- a/packages/planet/src/application/planet-application-loader.ts
+++ b/packages/planet/src/application/planet-application-loader.ts
@@ -278,7 +278,7 @@ export class PlanetApplicationLoader {
if (appRef) {
appRef.destroy();
}
- const container = getHTMLElement(planetApp.host);
+ const container = getHTMLElement(planetApp.hostParent);
const appRootElement = container.querySelector(planetApp.selector);
if (appRootElement) {
container.removeChild(appRootElement);
@@ -292,7 +292,7 @@ export class PlanetApplicationLoader {
this.setAppStatus(app, ApplicationStatus.bootstrapping);
const appRef = getPlanetApplicationRef(app.name);
if (appRef && appRef.bootstrap) {
- const container = getHTMLElement(app.host);
+ const container = getHTMLElement(app.hostParent);
let appRootElement: HTMLElement;
if (container) {
appRootElement = container.querySelector(app.selector);
diff --git a/packages/planet/src/application/planet-application-ref.spec.ts b/packages/planet/src/application/planet-application-ref.spec.ts
index 23fa0b3..a9c2131 100644
--- a/packages/planet/src/application/planet-application-ref.spec.ts
+++ b/packages/planet/src/application/planet-application-ref.spec.ts
@@ -27,7 +27,7 @@ class AppModule {}
const app1 = {
name: 'app1',
- host: '.host-selector',
+ hostParent: '.host-selector',
selector: 'app1-root-container',
routerPathPrefix: '/app1',
hostClass: 'app1-host',
diff --git a/packages/planet/src/application/planet-application.service.spec.ts b/packages/planet/src/application/planet-application.service.spec.ts
index fa1d6e8..cb76be3 100644
--- a/packages/planet/src/application/planet-application.service.spec.ts
+++ b/packages/planet/src/application/planet-application.service.spec.ts
@@ -15,7 +15,7 @@ describe('PlanetApplicationService', () => {
const app1 = {
name: 'app1',
- host: '.host-selector',
+ hostParent: '.host-selector',
selector: 'app1-root-container',
routerPathPrefix: '/app1',
hostClass: 'app1-host',
@@ -33,7 +33,7 @@ describe('PlanetApplicationService', () => {
const app2 = {
name: 'app2',
- host: '.host-selector',
+ hostParent: '.host-selector',
selector: 'app2-root-container',
routerPathPrefix: '/app2',
hostClass: 'app2-host',
diff --git a/packages/planet/src/assets-loader.spec.ts b/packages/planet/src/assets-loader.spec.ts
index 1745fa5..df2612d 100644
--- a/packages/planet/src/assets-loader.spec.ts
+++ b/packages/planet/src/assets-loader.spec.ts
@@ -195,7 +195,7 @@ describe('assets-loader', () => {
describe('loadAppAssets', () => {
const app1 = {
name: 'app1',
- host: '.host-selector',
+ hostParent: '.host-selector',
selector: 'app1-root-container',
routerPathPrefix: '/app1',
hostClass: 'app1-host',
diff --git a/packages/planet/src/helpers.spec.ts b/packages/planet/src/helpers.spec.ts
index ba7b3b5..f50b9b5 100644
--- a/packages/planet/src/helpers.spec.ts
+++ b/packages/planet/src/helpers.spec.ts
@@ -159,7 +159,7 @@ describe('helpers', () => {
describe('getScriptsAndStylesFullPaths', () => {
const app = {
name: 'app1',
- host: '.host-selector',
+ hostParent: '.host-selector',
selector: 'app1-root-container',
routerPathPrefix: '/app1',
hostClass: 'app1-host',
diff --git a/packages/planet/src/module.spec.ts b/packages/planet/src/module.spec.ts
index 0013089..e993451 100644
--- a/packages/planet/src/module.spec.ts
+++ b/packages/planet/src/module.spec.ts
@@ -7,7 +7,7 @@ import { RouterModule } from '@angular/router';
const app1 = {
name: 'app1',
- host: '.host-selector',
+ hostParent: '.host-selector',
selector: 'app1-root-container',
routerPathPrefix: '/app1',
hostClass: 'app1-host',
diff --git a/packages/planet/src/planet.class.ts b/packages/planet/src/planet.class.ts
index a3acf4d..4eb8e9c 100644
--- a/packages/planet/src/planet.class.ts
+++ b/packages/planet/src/planet.class.ts
@@ -10,7 +10,7 @@ export interface PlanetOptions {
export interface PlanetApplication {
name: string;
// 应用加载的宿主元素或者选择器
- host: string | HTMLElement;
+ hostParent: string | HTMLElement;
// 子应用的选择器
selector: string;
// 子应用路由前缀路径
diff --git a/packages/planet/src/planet.spec.ts b/packages/planet/src/planet.spec.ts
index 1004daf..53277aa 100644
--- a/packages/planet/src/planet.spec.ts
+++ b/packages/planet/src/planet.spec.ts
@@ -10,7 +10,7 @@ import { NgZone } from '@angular/core';
const app1 = {
name: 'app1',
- host: '.host-selector',
+ hostParent: '.host-selector',
selector: 'app1-root-container',
routerPathPrefix: '/app1',
hostClass: 'app1-host',
@@ -28,7 +28,7 @@ const app1 = {
const app2 = {
name: 'app2',
- host: '.host-selector',
+ hostParent: '.host-selector',
selector: 'app2-root-container',
routerPathPrefix: '/app2',
hostClass: 'app2-host',