diff --git a/src/app/for-internal/demo/pc/auto-display/demo-set.module.ts b/src/app/for-internal/demo/pc/auto-display/demo-set.module.ts index a95267a7a..8087b9faf 100644 --- a/src/app/for-internal/demo/pc/auto-display/demo-set.module.ts +++ b/src/app/for-internal/demo/pc/auto-display/demo-set.module.ts @@ -2,12 +2,15 @@ import { NgModule } from "@angular/core"; import { RouterModule } from "@angular/router"; import { JigsawAutoDisplayBasicDemoModule } from "./basic/demo.module"; import { JigsawAutoDisplayBasicDemoComponent } from "./basic/demo.component"; +import { JigsawAutoDisplayDirectiveDemoComponent } from "./directive/demo.component"; +import { JigsawAutoDisplayDirectiveDemoModule } from "./directive/demo.module"; export const routerConfig = [ + { path: "directive", component: JigsawAutoDisplayDirectiveDemoComponent }, { path: "basic", component: JigsawAutoDisplayBasicDemoComponent } ]; @NgModule({ - imports: [RouterModule.forChild(routerConfig), JigsawAutoDisplayBasicDemoModule] + imports: [RouterModule.forChild(routerConfig), JigsawAutoDisplayBasicDemoModule, JigsawAutoDisplayDirectiveDemoModule] }) export class AutoDisplayDemoModule { } diff --git a/src/app/for-internal/demo/pc/auto-display/directive/console.directive.ts b/src/app/for-internal/demo/pc/auto-display/directive/console.directive.ts new file mode 100644 index 000000000..c2fd8c27f --- /dev/null +++ b/src/app/for-internal/demo/pc/auto-display/directive/console.directive.ts @@ -0,0 +1,13 @@ +import { Input, Directive, ElementRef, Renderer2 } from '@angular/core'; + +@Directive({ + selector: '[myDirective]', +}) +export class ConsoleDirective { + constructor(public hostEl: ElementRef, private _renderer: Renderer2) { + console.log('hostEl', this.hostEl); + setTimeout(() => { + this._renderer.setStyle(this.hostEl.nativeElement, 'background', 'red'); + }, 100); + } +} diff --git a/src/app/for-internal/demo/pc/auto-display/directive/demo.component.css b/src/app/for-internal/demo/pc/auto-display/directive/demo.component.css new file mode 100644 index 000000000..c108ab6e9 --- /dev/null +++ b/src/app/for-internal/demo/pc/auto-display/directive/demo.component.css @@ -0,0 +1,15 @@ +.data-tags { + display: flex; + flex-wrap: wrap; + width: 80%; +} + +.data-tags>.jigsaw-tag-host { + margin-right: 4px; + margin-bottom: 2px; +} + +.demo-container { + width: 100%; + height: 600px; +} diff --git a/src/app/for-internal/demo/pc/auto-display/directive/demo.component.html b/src/app/for-internal/demo/pc/auto-display/directive/demo.component.html new file mode 100644 index 000000000..3bd88b0f2 --- /dev/null +++ b/src/app/for-internal/demo/pc/auto-display/directive/demo.component.html @@ -0,0 +1,24 @@ + + + + +Auto-display + + +基本用法 +
+ +
\ No newline at end of file diff --git a/src/app/for-internal/demo/pc/auto-display/directive/demo.component.ts b/src/app/for-internal/demo/pc/auto-display/directive/demo.component.ts new file mode 100644 index 000000000..389edd682 --- /dev/null +++ b/src/app/for-internal/demo/pc/auto-display/directive/demo.component.ts @@ -0,0 +1,81 @@ +import { Component, OnInit, ViewChild, ViewEncapsulation } from "@angular/core"; +import { AutoDisplayData, JigsawAutoDisplay } from "jigsaw/public_api"; +import { ConsoleDirective } from "./console.directive"; + +@Component({ + templateUrl: "./demo.component.html", + styleUrls: ['./../../assets/demo.common.css', './demo.component.css'], + encapsulation: ViewEncapsulation.None +}) +export class JigsawAutoDisplayDirectiveDemoComponent implements OnInit { + @ViewChild('autoDisplay') + public autoDisplay: JigsawAutoDisplay + + public data: AutoDisplayData[] = []; + + public directive = ConsoleDirective; + // public directive = 'test'; + + public addBarGraph() { + this.data.push({ + renderAs: 'origin-echarts', + initData: { + color: ['#3398DB'], + tooltip: { + trigger: 'axis', + axisPointer: { // 坐标轴指示器，坐标轴触发有效 + type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' + } + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true + }, + xAxis: [ + { + type: 'category', + data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], + axisTick: { + alignWithLabel: true + } + } + ], + yAxis: [ + { + type: 'value' + } + ], + series: [ + { + name: '直接访问', + type: 'bar', + barWidth: '60%', + data: [10, 52, 200, 334, 390, 330, 220] + } + ] + } + }) + this.autoDisplay.update(); + } + + public removeData(index: number) { + this.data.splice(index, 1); + this.autoDisplay.update(); + } + + public clearData() { + this.data = []; + } + + ngOnInit(): void { + // this.addTableData(); + } + + // ==================================================================== + // ignore the following lines, they are not important to this demo + // ==================================================================== + summary: string = ""; + description: string = ""; +} diff --git a/src/app/for-internal/demo/pc/auto-display/directive/demo.module.ts b/src/app/for-internal/demo/pc/auto-display/directive/demo.module.ts new file mode 100644 index 000000000..642dc4f52 --- /dev/null +++ b/src/app/for-internal/demo/pc/auto-display/directive/demo.module.ts @@ -0,0 +1,14 @@ +import { NgModule } from "@angular/core"; +import { CommonModule } from "@angular/common"; +import { JigsawDemoDescriptionModule } from "app/for-internal/description/demo-description"; +import { JigsawAutoDisplayModule, JigsawButtonModule, JigsawHeaderModule, JigsawTagModule } from "jigsaw/public_api"; +import { JigsawAutoDisplayDirectiveDemoComponent } from "./demo.component"; +// import { ConsoleDirective } from "./console.directive"; + +@NgModule({ + imports: [JigsawHeaderModule, CommonModule, JigsawDemoDescriptionModule, JigsawAutoDisplayModule, JigsawButtonModule, + JigsawTagModule], + declarations: [JigsawAutoDisplayDirectiveDemoComponent], + exports: [JigsawAutoDisplayDirectiveDemoComponent] +}) +export class JigsawAutoDisplayDirectiveDemoModule { } diff --git a/src/jigsaw/pc-components/auto-display/auto-display.html b/src/jigsaw/pc-components/auto-display/auto-display.html index cca5c538e..81edeff77 100644 --- a/src/jigsaw/pc-components/auto-display/auto-display.html +++ b/src/jigsaw/pc-components/auto-display/auto-display.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/jigsaw/pc-components/auto-display/auto-display.ts b/src/jigsaw/pc-components/auto-display/auto-display.ts index d9ecde9d5..69658812f 100644 --- a/src/jigsaw/pc-components/auto-display/auto-display.ts +++ b/src/jigsaw/pc-components/auto-display/auto-display.ts @@ -1,4 +1,4 @@ -import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Injector, Input, NgModule, OnDestroy, OnInit} from "@angular/core"; +import {ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Injector, Input, NgModule, OnDestroy, OnInit, Renderer2, ViewChild} from "@angular/core"; import {CommonModule} from "@angular/common"; import {AbstractJigsawComponent, JigsawCommonModule, WingsTheme} from "../../common/common"; import {RequireMarkForCheck} from "../../common/decorator/mark-for-check"; @@ -19,7 +19,8 @@ import {JigsawAutoDisplayRendererModule} from "./renderer/auto-display-renderer" export class JigsawAutoDisplay extends AbstractJigsawComponent implements OnInit, OnDestroy { constructor(private _changeDetectorRef: ChangeDetectorRef, // @RequireMarkForCheck 需要用到，勿删 - private _injector: Injector) { + private _injector: Injector, + public renderer: Renderer2) { super(); } @@ -65,6 +66,21 @@ export class JigsawAutoDisplay extends AbstractJigsawComponent implements OnInit public update() { this._transformData(); this._changeDetectorRef.markForCheck(); + console.log(this.container); + if (this.directive) { + const test = new this.directive(this.container, this.renderer); + console.log(test); + } + } + + @Input() + public directive; + + @ViewChild('container') + container: ElementRef; + + ngOnInit(): void { + } ngOnDestroy() {