Ich habe eine Komponente in Winkel 4, die dreimal aufgerufen wird. In Template-Metadaten habe ich ein div mit einer Direktive mit einigen Bindings wie dieser.
%Vor%this.cOptions ändern für jede Instanz der Komponente, dann in der Direktive habe ich dies:
%Vor% Das Problem ist, dass console.log(this.cOptions); immer dasselbe Objekt druckt, auch wenn die Komponente cOptions mit verschiedenen Werten in ngOnInit Methode des Compnents gesetzt hat.
Haben Sie eine Ahnung, was falsch ist?
Die Bindung Ihrer Komponenteneigenschaft [cOptions]="dataChart" sieht nicht gut aus, da Ihr dataChart noch nicht einmal definiert ist. Es sollte wie [DIRECTIVE_PROPERTY]="COMPONENT_PROPERTY" sein und Ihre COMPONENT_PROPERTY ist noch nicht einmal in SGComponent komponentenklasse definiert.
Ihre Komponentenklasse sollte etwa so aussehen:
%Vor% @Ashwani weist auf ein gültiges Problem mit Ihrem Code hin. Die Art und Weise, wie Ihre Vorlage die Verbindung herstellt, wird niemals an den SGDirective -Eingabe weitergegeben.
Ein anderes potentielles Problem, mit dem Sie möglicherweise konfrontiert sind, hat mit dem Code gServ zu tun. Wenn gServ ein Singleton ist (was wahrscheinlich der Fall ist) und das gleiche Objekt an jedes SGComponent s zurückgibt, dann haben alle SGDirective s den gleichen Wert. Eine einfache Möglichkeit, dies zu testen, ist {{Options | json}} in die Vorlage SGComponent einzufügen.
Um eine neue Instanz des Dienstes gServ für jede SGComponent zu erstellen, können Sie den Metadaten providers ein @Component -Array hinzufügen. Es würde so aussehen:
Sie haben wahrscheinlich den gleichen Rückgabewert bei this.gServ.objectMerge) (Sie können es testen, ohne den Service aufzurufen und jedes einzelne von Ihnen erstellte Objekt zu übergeben)
Wenn das der Fall ist, ist Ihr Problem, dass gServ an der gleichen rootComponent bereitgestellt wird. mit eckigen, Service Provider auf der gleichen rootComponent sind Singleton.
Und benutze den gleichen Typ in deiner Direktive und deiner Komponente !!
Tags und Links javascript angular angular-directive angular-components