Web library létrehozása, Angular 4

Bocs, előbb írtam, mint, hogy olvastam volna :D

1 kedvelés

Még mindig van egy “hogyan érdemes” kérdésem.
Szóval adott három osztály, ebből csak az egyik érdekes most:

export class Page {
  id: number;
  title: string;
  conditions: Condition[];
  content: Content;
}

Amire nekem szükségem lenne, az egy Singleton, ami a pages array-t kezelné. Mert lenne benne hozzáadás, szerkesztés, eltávolítás, stb…
De nem akarom elhasználni rá a pages.service.ts-t, mert ezt majd az adatbázis kapcsolatra szeretném felhasználni. Az app.components.ts-be sem szeretném tenni, hiszen sok funkciót kaphat. Most ugyan létrehoztam egy main.service.ts-t, ami jelenleg megvalósítja ezt, de a gondom az, hogy lehet majd a Condition és a Content osztályoknak is kell majd egy-egy külön fájl, ahol szintén meglesznek a funkciói. Néztem a példakódot, ahol a heroes.component.ts fájlban valósítja meg a herok szerkesztését. De én nem biztos, hogy akarok az összes oldalnak egy ilyen komponenst.
Hogyan lehetne ezt kivitelezni, hogy létrejöjjön a helyes Style Guide szerinti megvalósítás?

Ami a component-hez tartozik, az oda tartozik és kész. Ha több komponens csinálja ugyanazt, akkor azt a funkcionalitást ki kell refaktorálni egy service-be, és a service-t beinjektálni a komponensekbe.

Én a CRUD funkcionalitást beletettem egy entityService-be, mert mindent kell menteni meg updatelni meg törölni. A service be van injektálva a componentekbe, és mindannyian azt használják a saját adataikkal.

Szerk: igazából van egy abstract BaseComponent classom, amibe az entityService bele van injektálva, és abban vannak a create/update stb.functionok. Ezt extendeli a többi component.

Abstract class-t, hogy lehet létrehozni?
Vagy egyáltalán nem kell megjelölni abastractként csak tudod, hogy az az?
Vagy hogyan lehet megírni azt, hogy ha subclass van, akkor kötelező legyen felülírni egy-egy funkciót/property-t?

import { MyService } from './path/to/service';

export abstract class ParentClass {
   
   protected myParam: any;

   //constructor param has to be public or protected, 
   //to be accessible by the children
   constructor(public myService: MyService){
   }
   
   ///////////////////

 //this has to be implemented in every child
  protected abstract implementThis(): void;
  
   
   //every child has this function
   protected doSomething(){
      this.myService.doSomething();
   }
}

Es igy extendeled:

import { ParentClass } from './path';
import { MyService } from './path';
import { OtherService } from './path';

export class ChildClass extends ParentClass {

//every constructor param, the parent has, has to be passed
// in the child's constructor function, in a super() call.
constructor(public myService: MyService,  
            private otherService: OtherService ) {
   
          super(myService);
}

 protected implementThis(){
   //implementation
 }

}
1 kedvelés

En meg ennyi hibat nem vetettem egy ilyen rovid kodban :D De most elvileg jo.

1 kedvelés

Igazából a kódot úgy sem illesztettem volna be, hanem csak az elmélet érdekelt! Köszönöm!!!

Következő izzasztó kérdés :D
Swift-ben van protocol. Ez szintén olyasmi, mint egy abstract class (swiftben nincs is abstract). Szóval ott ha egy class ki van terjesztve abstractként, akkor kötelező minden property-t és functiont létrehozni. És egy másik osztályban meg lehet adni egy property-t (delegate), ami támogatha ezt a protocolt (abstract). Ez itt így működik?
Erre gondolok:

export abstract class SomeProtocol {
  protected abstract myParam: any;
  protected abstract implementThis(): void;
}

export class Valami extends SomeProtocol { ... }
export class MasValami implements OnInit {
    public delegate: SomeProtocol
    ngOnInit() {
        this.delegate = new Valami();
        this.delegate.implementThis();
    }
}

Jó, persze nem az ngOnInit-ben létrehozva meg nem így használva, csak hogy lásd az elméletet.
A gondom az, hogy van egy comonens osztály, ahol van két injektált service. Az egyik service-nek visszafelé is kellene kommunikálnia (mert például egy egérkattintás esemény ott keletkezik). Hozzáteszem azt is, hogy a componensnek nincs értelme a service nélkül és fordítva is igaz. Vagy emiatt oldjam meg az egészet a componensben? Lehet sokkal egyszerűbb lenne… csak szét akartam választani a componens működését a cytoscape rajzolástól…

Jó mondjuk valószínűleg a cytoscape rajzolást most fixen beleteszem a componensbe, hiszen úgy is együtt van értelme… De az elmélet akkor is érdekel :D

A peldadban a Valami egy egy injectable service, a MasValami constructoraba kellene injectalni.

A user eventet a componentek kezelik, hiszen hozzajuk tartozik a view.

@Component({selector, template blabla})
export class MyComponent(){
    constructor(valami: ValamiService ){}

    //you can pass the function whatever you want, of course
    public handleClick(event: any) {
       this.valami.implementThis(event.target.value);
    }
}

my.component.html:

<input type="text" (keyup)="handleClick($event)">

Ja igen, nem írtam le egyértelműen. Pont, hogy a MasValami lenne a service és azt szeretném injektálni a Valami-be. Tehát hogy meglegyen a kommunikáció a Valami és MasValami között és visszafelé is. Ugyanis alap esetben a componens (Valami) hívogatná a service kódjait, de van olyan, amikor a MasValami (service) keletkezik egy esemény, amiről meg értesíteni kell a componenst (Valami). Bár azt hiszem, hogy ezt Observable segítségével oldják meg.

Egyébként igazad van, mert végül már beraktam a cytocape-et a componensbe (mert ugyebár rájöttem, hogy nincs értelme külön rakni).

Szóval még tanulnom kell sokat, hogy mit hogyan lehet és kell megoldani.
Amúgy köszi a kitartó segítséget! :)

1 kedvelés

En a komponensek kozotti kommunikaciot Observer patternnel oldom meg. Nem egeszen igy, de itt pl van egy tok jo pelda kiindulaskepp:

http://jasonwatmore.com/post/2016/12/01/angular-2-communicating-between-components-with-observable-subject

1 kedvelés

Köszönöm! Szerintem ez lesz amit kerestem! :)

Amúgy lassan már csak egy dolog hiányzik, hogy az egészet Te írd meg :D

:D

Na, már megint elakadtam… hihetetlen :D
A gond az, hogy a cytoscapenek van egy funckiója, amikor kiválasztok egy elemet, akkor visszajelez a kiválasztott elemmel:

this.cy.on('tap', function(event) { ... } );

És ezen belül ha meghívok egy typescript functiót, akkor kiírja, hogy:

TypeError: this.xxxfunction is not a function.

Közben persze keresem a megoldást…

Erre mit mond?

this.cy.on('tap', () => {...ts function here})
1 kedvelés

Köszönöm! Nem is olyan egyszerű ez a typescript :)
Legalább most már tudom, hogy mi ez a szintaktika: () => { }
Mert a példakódban volt használatban, de nem magyarázták el!

Fat arrow function, nem veszted el vele a scope-ot.

https://basarat.gitbooks.io/typescript/docs/arrow-functions.html

Akkor megy?

Bocs, most vettem észre, hogy erre nem válaszoltam. Amúgy igen, akkor ment, most megint volt vele egy kis gond, de már megint megy :slight_smile:

Nem értem. Múltkor megcsináltam, hogy proxyn keresztül működjön az authentikáció (mármint egyelőre php-ban írom MAMP segítségével) és most meg egyáltalán nem akar működni.

Ez az utolsó proxy config fájlom ami működött:

"/api": {
	"target": "http://localhost:8888",
	"secure": false,
	"logLevel": "debug",
	"changeOrigin": "true",
	"pathRewrite": { "^/api": "" }
}

Bár azt szeretném, hogy ha a http://localhost:8888/backend lenne az elérési út, nem közvetlen a port. Hogy kell ezt megcsinálni, hogy jó legyen?