Angular 使用NGX-GRAPH自定义节点模板和边模板不起作用

我是NGX-GRAPH的新手。我正在尝试构建一个定向图。 这是我的代码：

ngx graph.component.html：

<ngx-graph *ngIf="nodes?.length > 0 && links?.length > 0"
          [links]="links"
          [nodes]="nodes"></ngx-graph>

import { Component, OnInit } from '@angular/core';
import { ServerService } from '../server.service';
import { ActivatedRoute, Router } from '@angular/router';
import { Edge, Node} from '@swimlane/ngx-graph';

@Component({
  selector: 'app-ngx-graph',
  templateUrl: './ngx-graph.component.html',
  styleUrls: ['./ngx-graph.component.scss']
})
export class NgxGraphComponent implements OnInit {
  id: number;
  constructor(private serverService: ServerService, private route: ActivatedRoute) { }
  nodes: Node[] = [];
  links: Edge[] = [];

  ngOnInit() {
    this.id = +this.route.snapshot.params.id;
    this.serverService.getGraphGivenEndpointId(this.id).subscribe(
      response => { this.nodes = response[0];
                    this.links = response[1];
                    console.log(this.nodes);

      }
    );
  }
}

(2) [{…}, {…}]
0: {id: "first", label: "A", meta: {…}, dimension: {…}, position: {…}, …}
1: {id: "second", label: "B", meta: {…}, dimension: {…}, position: {…}, …}
2: {id: "first", label: "A", meta: {…}, dimension: {…}, position: {…}, …}
length: 3
__proto__: Array(0)

@Injectable()
export class ServerService {
    constructor(private http: HttpClient, private elencoEndpointService: ElencoEndpointService) {}

    getGraphGivenEndpointId(id: number) {
       return this.http.get('http://localhost:8080/app/endpoint?id=' + id);
    }
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {RouterModule, Routes, Router} from '@angular/router';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatSidenavModule} from '@angular/material/sidenav';
import { MainNavComponent } from './main-nav/main-nav.component';
import { LayoutModule } from '@angular/cdk/layout';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';
import { AddEndpointComponent } from './add-endpoint/add-endpoint.component';
import {MatDividerModule} from '@angular/material/divider';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatInputModule} from '@angular/material/input';
import { ElencoEndpointComponent } from './elenco-endpoint/elenco-endpoint.component';
import { ElencoEndpointService } from './elencoEndpoint.service';
import { HomePageComponent } from './home-page/home-page.component';
import { HttpClientModule } from '@angular/common/http';
import { ServerService } from './server.service';
import { NgxGraphModule } from '@swimlane/ngx-graph';
import { NgxGraphComponent } from './ngx-graph/ngx-graph.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import {ScrollingModule} from '@angular/cdk/scrolling';
import {A11yModule} from '@angular/cdk/a11y';
import {TextFieldModule} from '@angular/cdk/text-field';

const appRoutes: Routes = [
  {path: '', component: HomePageComponent},
  {path: 'add-endpoint', component: AddEndpointComponent},
  {path: 'view-endpoint', component: ElencoEndpointComponent},
  {path: 'view-endpoint/:id', component: NgxGraphComponent},

];

@NgModule({
  declarations: [
    AppComponent,
    MainNavComponent,
    AddEndpointComponent,
    ElencoEndpointComponent,
    HomePageComponent,
    NgxGraphComponent,
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    RouterModule.forRoot(appRoutes),
    AppRoutingModule,
    BrowserAnimationsModule,
    MatToolbarModule,
    MatSidenavModule,
    LayoutModule,
    MatButtonModule,
    MatIconModule,
    MatListModule,
    MatDividerModule,
    MatFormFieldModule,
    MatInputModule,
    NgxGraphModule,
    FormsModule,
    ReactiveFormsModule,
    ScrollingModule,
    A11yModule,
    TextFieldModule,
  ],
  providers: [ElencoEndpointService, ServerService],
  bootstrap: [AppComponent]
})
export class AppModule { }

这是服务返回的我的JSON：

<ngx-graph *ngIf="nodes?.length > 0 && links?.length > 0"
          [links]="links"
          [nodes]="nodes"></ngx-graph>

import { Component, OnInit } from '@angular/core';
import { ServerService } from '../server.service';
import { ActivatedRoute, Router } from '@angular/router';
import { Edge, Node} from '@swimlane/ngx-graph';

@Component({
  selector: 'app-ngx-graph',
  templateUrl: './ngx-graph.component.html',
  styleUrls: ['./ngx-graph.component.scss']
})
export class NgxGraphComponent implements OnInit {
  id: number;
  constructor(private serverService: ServerService, private route: ActivatedRoute) { }
  nodes: Node[] = [];
  links: Edge[] = [];

  ngOnInit() {
    this.id = +this.route.snapshot.params.id;
    this.serverService.getGraphGivenEndpointId(this.id).subscribe(
      response => { this.nodes = response[0];
                    this.links = response[1];
                    console.log(this.nodes);

      }
    );
  }
}

(2) [{…}, {…}]
0: {id: "first", label: "A", meta: {…}, dimension: {…}, position: {…}, …}
1: {id: "second", label: "B", meta: {…}, dimension: {…}, position: {…}, …}
2: {id: "first", label: "A", meta: {…}, dimension: {…}, position: {…}, …}
length: 3
__proto__: Array(0)

@Injectable()
export class ServerService {
    constructor(private http: HttpClient, private elencoEndpointService: ElencoEndpointService) {}

    getGraphGivenEndpointId(id: number) {
       return this.http.get('http://localhost:8080/app/endpoint?id=' + id);
    }
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {RouterModule, Routes, Router} from '@angular/router';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatSidenavModule} from '@angular/material/sidenav';
import { MainNavComponent } from './main-nav/main-nav.component';
import { LayoutModule } from '@angular/cdk/layout';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';
import { AddEndpointComponent } from './add-endpoint/add-endpoint.component';
import {MatDividerModule} from '@angular/material/divider';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatInputModule} from '@angular/material/input';
import { ElencoEndpointComponent } from './elenco-endpoint/elenco-endpoint.component';
import { ElencoEndpointService } from './elencoEndpoint.service';
import { HomePageComponent } from './home-page/home-page.component';
import { HttpClientModule } from '@angular/common/http';
import { ServerService } from './server.service';
import { NgxGraphModule } from '@swimlane/ngx-graph';
import { NgxGraphComponent } from './ngx-graph/ngx-graph.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import {ScrollingModule} from '@angular/cdk/scrolling';
import {A11yModule} from '@angular/cdk/a11y';
import {TextFieldModule} from '@angular/cdk/text-field';

const appRoutes: Routes = [
  {path: '', component: HomePageComponent},
  {path: 'add-endpoint', component: AddEndpointComponent},
  {path: 'view-endpoint', component: ElencoEndpointComponent},
  {path: 'view-endpoint/:id', component: NgxGraphComponent},

];

@NgModule({
  declarations: [
    AppComponent,
    MainNavComponent,
    AddEndpointComponent,
    ElencoEndpointComponent,
    HomePageComponent,
    NgxGraphComponent,
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    RouterModule.forRoot(appRoutes),
    AppRoutingModule,
    BrowserAnimationsModule,
    MatToolbarModule,
    MatSidenavModule,
    LayoutModule,
    MatButtonModule,
    MatIconModule,
    MatListModule,
    MatDividerModule,
    MatFormFieldModule,
    MatInputModule,
    NgxGraphModule,
    FormsModule,
    ReactiveFormsModule,
    ScrollingModule,
    A11yModule,
    TextFieldModule,
  ],
  providers: [ElencoEndpointService, ServerService],
  bootstrap: [AppComponent]
})
export class AppModule { }

服务器服务.ts：

<ngx-graph *ngIf="nodes?.length > 0 && links?.length > 0"
          [links]="links"
          [nodes]="nodes"></ngx-graph>

import { Component, OnInit } from '@angular/core';
import { ServerService } from '../server.service';
import { ActivatedRoute, Router } from '@angular/router';
import { Edge, Node} from '@swimlane/ngx-graph';

@Component({
  selector: 'app-ngx-graph',
  templateUrl: './ngx-graph.component.html',
  styleUrls: ['./ngx-graph.component.scss']
})
export class NgxGraphComponent implements OnInit {
  id: number;
  constructor(private serverService: ServerService, private route: ActivatedRoute) { }
  nodes: Node[] = [];
  links: Edge[] = [];

  ngOnInit() {
    this.id = +this.route.snapshot.params.id;
    this.serverService.getGraphGivenEndpointId(this.id).subscribe(
      response => { this.nodes = response[0];
                    this.links = response[1];
                    console.log(this.nodes);

      }
    );
  }
}

(2) [{…}, {…}]
0: {id: "first", label: "A", meta: {…}, dimension: {…}, position: {…}, …}
1: {id: "second", label: "B", meta: {…}, dimension: {…}, position: {…}, …}
2: {id: "first", label: "A", meta: {…}, dimension: {…}, position: {…}, …}
length: 3
__proto__: Array(0)

@Injectable()
export class ServerService {
    constructor(private http: HttpClient, private elencoEndpointService: ElencoEndpointService) {}

    getGraphGivenEndpointId(id: number) {
       return this.http.get('http://localhost:8080/app/endpoint?id=' + id);
    }
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {RouterModule, Routes, Router} from '@angular/router';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatSidenavModule} from '@angular/material/sidenav';
import { MainNavComponent } from './main-nav/main-nav.component';
import { LayoutModule } from '@angular/cdk/layout';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';
import { AddEndpointComponent } from './add-endpoint/add-endpoint.component';
import {MatDividerModule} from '@angular/material/divider';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatInputModule} from '@angular/material/input';
import { ElencoEndpointComponent } from './elenco-endpoint/elenco-endpoint.component';
import { ElencoEndpointService } from './elencoEndpoint.service';
import { HomePageComponent } from './home-page/home-page.component';
import { HttpClientModule } from '@angular/common/http';
import { ServerService } from './server.service';
import { NgxGraphModule } from '@swimlane/ngx-graph';
import { NgxGraphComponent } from './ngx-graph/ngx-graph.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import {ScrollingModule} from '@angular/cdk/scrolling';
import {A11yModule} from '@angular/cdk/a11y';
import {TextFieldModule} from '@angular/cdk/text-field';

const appRoutes: Routes = [
  {path: '', component: HomePageComponent},
  {path: 'add-endpoint', component: AddEndpointComponent},
  {path: 'view-endpoint', component: ElencoEndpointComponent},
  {path: 'view-endpoint/:id', component: NgxGraphComponent},

];

@NgModule({
  declarations: [
    AppComponent,
    MainNavComponent,
    AddEndpointComponent,
    ElencoEndpointComponent,
    HomePageComponent,
    NgxGraphComponent,
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    RouterModule.forRoot(appRoutes),
    AppRoutingModule,
    BrowserAnimationsModule,
    MatToolbarModule,
    MatSidenavModule,
    LayoutModule,
    MatButtonModule,
    MatIconModule,
    MatListModule,
    MatDividerModule,
    MatFormFieldModule,
    MatInputModule,
    NgxGraphModule,
    FormsModule,
    ReactiveFormsModule,
    ScrollingModule,
    A11yModule,
    TextFieldModule,
  ],
  providers: [ElencoEndpointService, ServerService],
  bootstrap: [AppComponent]
})
export class AppModule { }

有了这段代码，库就可以正常工作了。我获得了基本图形，就像“快速入门”页面中的图形一样

但如果我尝试自定义节点，只添加此部分，而不更改任何其他内容：

<ng-template #nodeTemplate let-node>
        <svg:g class="node">
            <svg:rect [attr.width]="node.dimension.width" [attr.height]="node.dimension.height"
                [attr.fill]="node.data.color" />
            <svg:text alignment-baseline="central" [attr.x]="10" [attr.y]="node.dimension.height / 2">{{node.label}}
            </svg:text>
        </svg:g>
    </ng-template>

这是我的app.module.ts：

<ngx-graph *ngIf="nodes?.length > 0 && links?.length > 0"
          [links]="links"
          [nodes]="nodes"></ngx-graph>

import { Component, OnInit } from '@angular/core';
import { ServerService } from '../server.service';
import { ActivatedRoute, Router } from '@angular/router';
import { Edge, Node} from '@swimlane/ngx-graph';

@Component({
  selector: 'app-ngx-graph',
  templateUrl: './ngx-graph.component.html',
  styleUrls: ['./ngx-graph.component.scss']
})
export class NgxGraphComponent implements OnInit {
  id: number;
  constructor(private serverService: ServerService, private route: ActivatedRoute) { }
  nodes: Node[] = [];
  links: Edge[] = [];

  ngOnInit() {
    this.id = +this.route.snapshot.params.id;
    this.serverService.getGraphGivenEndpointId(this.id).subscribe(
      response => { this.nodes = response[0];
                    this.links = response[1];
                    console.log(this.nodes);

      }
    );
  }
}

(2) [{…}, {…}]
0: {id: "first", label: "A", meta: {…}, dimension: {…}, position: {…}, …}
1: {id: "second", label: "B", meta: {…}, dimension: {…}, position: {…}, …}
2: {id: "first", label: "A", meta: {…}, dimension: {…}, position: {…}, …}
length: 3
__proto__: Array(0)

@Injectable()
export class ServerService {
    constructor(private http: HttpClient, private elencoEndpointService: ElencoEndpointService) {}

    getGraphGivenEndpointId(id: number) {
       return this.http.get('http://localhost:8080/app/endpoint?id=' + id);
    }
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {RouterModule, Routes, Router} from '@angular/router';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatSidenavModule} from '@angular/material/sidenav';
import { MainNavComponent } from './main-nav/main-nav.component';
import { LayoutModule } from '@angular/cdk/layout';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';
import { AddEndpointComponent } from './add-endpoint/add-endpoint.component';
import {MatDividerModule} from '@angular/material/divider';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatInputModule} from '@angular/material/input';
import { ElencoEndpointComponent } from './elenco-endpoint/elenco-endpoint.component';
import { ElencoEndpointService } from './elencoEndpoint.service';
import { HomePageComponent } from './home-page/home-page.component';
import { HttpClientModule } from '@angular/common/http';
import { ServerService } from './server.service';
import { NgxGraphModule } from '@swimlane/ngx-graph';
import { NgxGraphComponent } from './ngx-graph/ngx-graph.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import {ScrollingModule} from '@angular/cdk/scrolling';
import {A11yModule} from '@angular/cdk/a11y';
import {TextFieldModule} from '@angular/cdk/text-field';

const appRoutes: Routes = [
  {path: '', component: HomePageComponent},
  {path: 'add-endpoint', component: AddEndpointComponent},
  {path: 'view-endpoint', component: ElencoEndpointComponent},
  {path: 'view-endpoint/:id', component: NgxGraphComponent},

];

@NgModule({
  declarations: [
    AppComponent,
    MainNavComponent,
    AddEndpointComponent,
    ElencoEndpointComponent,
    HomePageComponent,
    NgxGraphComponent,
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    RouterModule.forRoot(appRoutes),
    AppRoutingModule,
    BrowserAnimationsModule,
    MatToolbarModule,
    MatSidenavModule,
    LayoutModule,
    MatButtonModule,
    MatIconModule,
    MatListModule,
    MatDividerModule,
    MatFormFieldModule,
    MatInputModule,
    NgxGraphModule,
    FormsModule,
    ReactiveFormsModule,
    ScrollingModule,
    A11yModule,
    TextFieldModule,
  ],
  providers: [ElencoEndpointService, ServerService],
  bootstrap: [AppComponent]
})
export class AppModule { }

我谨此陈辞：

快速启动 安装程序包：npm Install@swimlane/ngx graph--save

将NgxGraphModule导入角度模块

添加ngx图形组件

有什么问题

也许我必须导入quickstart页面中未指定的其他内容

---

提前感谢。

ngx graph 6.2.0与Angular 9不兼容

NPM或Thread应该给您一个缺少对等依赖性的警告

安装下一版本的ngx图形（7.0.0-rc.1而不是6.2.0）将有所帮助。我想angular 9.0.3只与版本7.0.0-rc.1兼容

使用以下命令之一：

泳道/ngx处的纱线添加-graph@next

---

npm i@swimlane/ngx-graph@next

对于这些情况，了解您使用的软件包的版本非常有帮助。我建议在你的问题中添加package.json中的角度图和ngx图的线条。