2016-04-26 9 views
1

Ich bin wie so eine sehr einfache Winkelkomponente erklärt:Wie vermeide ich neue eckige Komponenten im Emca 6?

import htmlTemplate from './searchInput.html' 

export default class SearchInput { 

    constructor() { 
     this.template = htmlTemplate; 
    } 

} 

Und ich dann verwenden, wie folgt aus:

import SearchInput from './components/searchInput/searchInput'; 

angular.module('prj', []) 
    .component('searchInput', new SearchInput()); 

Das funktioniert gut.

Aber alle Beispiele mit eckigen 1.x und ECMA 6, die ich bisher gefunden habe, rufen new auf der SearchInput Klasse nicht auf. Wenn ich die new weglasse, wird die Vorlage nicht geladen. Wenn ich will in der Lage sein zu meinen Code (ohne neu) zu ändern,

angular.module('prj', []) 
    .component('searchInput', SearchInput()); 

was muss ich ändern?

+0

Versuchte Reflect.construct ('SearchInput', '')? – rrd

+0

Wo soll ich das hinstellen und was soll es tun? – BetaRide

+0

.component ('searchInput', Reflect.construct ('SearchInput', '')); geben Sie einen Versuch – rrd

Antwort

0

Versuchen Sie .component('searchInput', new SearchInput()); nicht als Funktionsaufruf. Da auf diese Weise von der contructor() ein return value

class SearchInput() 
{ 
    constructor() 
    { 
     this.template = ... // whatever value you see fit 
    } 
    controller() 
    { 
     ... // implements your logic 
    } 
} 

Der neue ist nur die Controller-Methode


dieses Beispiel erwarten, Ich sehe für Tests verwendet:

JAVASCRIPT

(() => 
{ 
    'use strict'; 
    class BackgroundDetail 
    { 
     constructor() 
     { 
      this.template = `<fieldset> 
           <label>{{$ctrl.name}}</label> 
           <span> 
            Master: 
            <em> 
             {{$ctrl.master}} 
            </em> 
           </span> 
           <hr/> 
           <input ng-model="$ctrl.master"> 
           <pre>{{$ctrl|json}}</pre> 
          </fieldset>`; 
     } 
     controller() 
     { 
      var self = this; 
      self.master = 'Jesus'; 
      self.name = 'Salathiel Genèse'; 
     } 
    } 



    angular.module('app', []) 
    .component('backgroundDetail', new BackgroundDetail()); 
})(); 

HTML

<!DOCTYPE html> 
<html xmlns:ng="http://angularjs.org" ng-app="app" ng-cloak ng-strict-di> 
    <head> 
     <meta charset="utf-8"> 
     <title>{{app.title}}</title> 
     <!-- AngularJs requirements --> 
     <script src="web/libs/jquery/dist/jquery.js"></script> 
     <script src="web/libs/angular/angular.js"></script> 
     <!-- app requirements --> 
     <script src="web/js/javascript.js"></script> 
    </head> 
    <body> 
     <background-detail></background-detail> 
    </body> 
</html> 
+0

Gleiches Ergebnis, die Vorlage ist nicht geladen. – BetaRide

+0

Ich habe noch nicht über angular compoenent gelesen, aber das Beispiel [hier gezeigt] (https://docs.angularjs.org/guide/component) nimmt als zweiten Parameter ein 'Object' mit den relevanten Attributen' {templateUrl, controller} ' aber ich denke '{template, controller}' sollte gleich funktionieren. Also lass mich meinen Beitrag –

+0

Stil gleich editieren. Sobald ich das 'neue' (und das'() 'weglasse) wird nichts angezeigt. – BetaRide

Verwandte Themen