WIP[新增] auto-display组件支持传入指令，关联了@4379

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 { }

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);
+    }
+}

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;
+}

src/app/for-internal/demo/pc/auto-display/directive/demo.component.html

@@ -0,0 +1,24 @@
+<!-- ignore the following lines, they are not important to this demo -->
+<jigsaw-demo-description [summary]="summary" [content]="description">
+</jigsaw-demo-description>
+
+<jigsaw-header [level]="1">Auto-display</jigsaw-header>
+<ul class="demo-options">
+    <li class="demo-options-item">
+        <span>数据控制</span>
+        <jigsaw-button (click)="clearData()">清空数据</jigsaw-button>
+        <jigsaw-button (click)="addBarGraph()">添加柱状图</jigsaw-button>
+    </li>
+    <li class="demo-options-item">
+        <span>数据删除</span>
+        <div class="data-tags">
+            <jigsaw-tag *ngFor="let item of data; let i = index" [closable]="true" (close)="removeData(i)">数据源 - {{i +
+                1}}</jigsaw-tag>
+        </div>
+    </li>
+</ul>
+
+<jigsaw-header>基本用法</jigsaw-header>
+<div class="demo-container">
+    <jigsaw-auto-display #autoDisplay [data]="data" [directive]="directive"></jigsaw-auto-display>
+</div>

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 = "";
+}

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 { }

src/jigsaw/pc-components/auto-display/auto-display.html

@@ -1,4 +1,4 @@
-<div class="jigsaw-auto-display-row" *ngFor="let row of _$viewData">
+<div #container class="jigsaw-auto-display-row" *ngFor="let row of _$viewData">
     <jigsaw-auto-display-content *ngFor="let item of row" [renderer]="item.renderAs"
         [rendererInitData]="item.initData">
     </jigsaw-auto-display-content>

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() {