Nem tudom, hogy mennyire friss ez az ng-cytoscape.
Most fent van nekem a /usr/local/lib/node_modules mappában cytoscape néven.
Ebben egy angular projekt van. Amiben van src, dist, node_modules… stb.
Próbáltam berakni a package.json fájlba a dependencies alá:
"cytoscape.js": "3.2.2"
és előtte js nélkül is.
"cytoscape": "3.2.2"
A build nem dobott hibát egyikkel sem. Legalábbis amikor futtattam az ng serve --open paranccsal, akkor egyik esetben sem írt ki hibát. De ami még érdekes, hogy akkor sem dob hibát, ha elírom a nevét.
Még sehogy, mert bármilyen importra hibát dobott.
Most másképp próbálkozok:
az app mappa mellé csináltam egy javascripts mappát. Ezt a .angular-cli.json fájlban bejegyeztem assetsnél és a scripts-hez hozzáadtam a javascripts/cytoscape.min.js fájlt.
Ezután a typings.d.ts fájlban próbálom most importálni :D
Ezt nem értem, hiszen ezzel kezdtem. Bár így utólag belegondolva volt egy hiba amikor rákerestem, hogy milyen package van telepítve a projekthez (npm list). Ekkor találtam egy leírást, hogy először szedjem le a korábbi verziót és a globálhoz adjam hozzá. Ezután már nem dobott hibát, az npm list -g, viszont már nem működött az import.
Most ott tartok, hogy nem dob hibát az importra.
Ez a cy.service.ts fájlom:
import { Injectable } from '@angular/core';
import * as cytoscape from 'cytoscape';
@Injectable()
export class Cy {
private cy;
ngOnInit(): void {
this.cy = cytoscape({
container: document.getElementById('cy'),
...
});
}
}
Ez importálva van az app.component.ts fájlba:
import { Component } from '@angular/core';
import { Cy } from '../../services/cy.service';
@Component({
selector: 'app-root',
template: `
<h1>
Welcome to {{title}}!!
</h1>
<router-outlet></router-outlet>
`,
styles: []
})
export class AppComponent {
title = 'app';
constructor(private cy: Cy ) {}
}
És még nem dob hibát
Köszi, már ez is jó, hogy így eljutottam idáig!
szerk: vagyis a fordító nem dob hibát, a weboldal még igen
Itt a document.getElementById alapján veszi, hogy “hova kell dolgoznia”.
A cy div elem az létezik, mert a styles.css-ben megadtam, hogy legyen piros a háttere meg fix szélességet, magasságot állítottam be. Szóval meg is jelenik pirosan, de valószínűleg hamarabb töltődik be a service, mint az oldal és emiatt nem jó a “binding” vagy mi a fene :D.
Az app.component-be raknék OnInit-et, a Cy-be meg egy sima functiont, mondjuk runInit néven, ami megcsinálja azt, amit most az OnInitben csinálsz. Az app component ngOnInitjeben meg hivnék egy this.Cy.runInit() callt.
Igazabol neked az ngAfterViewInit kellene, azt hiszem.
ngAfterViewInit()
Respond after Angular initializes the component’s views and child views.
Called once after the first ngAfterContentChecked().
A component-only hook.
Igazából ez egy egyszerű app lesz.
A főablakon kívül talán még egy vagy max két oldal lesz, ahol már amúgy sem kell a cytoscape.
Még azért ezt a lifecycle-t át kellene néznem rendesen, bár innen már nem lesz gond!
Nagyon szépen köszönöm a segítséget és neked is jó éjt!
Megint elakadtam egy egyszerű dologban. Van egy Page osztályom, ami egyszerű:
import { Condition } from './condition';
export class Page {
public id: number;
public title: string;
public conditions: [Condition];
public node: any;
}
Van a service, amiben egy arrayba menteném el a több oldal adatait:
private pages: [Page];
És hiába próbálok meg hozzáadni egy új page elemet
var page = new Page();
...
this.pages.push(page);
kiírja:
undefined is not an object (evaluating 'this.pages.push')
Itt valamiért olyan érzésem van, hogy maga az array nincs inicializálva. Megnéztem a példakódot, amit megcsináltam a minap és ott sem látom inicializálást sehol sem.
Mi lehet a baj?
Most nézem, hogy a példakódban mégis csak inicializálva van, csak egy másik service-ben történik az inicializálás (pontosabban az alap elemeket a másik serviceből kapja).
