Komponente arbeitet lokal, aber nicht im Einsatz

Question

Ich habe diese Komponente.

import {Component} from "angular2/core"; 
import {ClothesService} from "./clothes.service"; 

import {AngularFire} from 'angularfire2'; 
import {Inject} from "angular2/core"; 
import {FirebaseRef} from 'angularfire2'; 
import {SideNav} from './sidenav'; 

@Component({ 
    selector: "today", 
    templateUrl: "app/html/today.component.html", 
    providers: [ClothesService], 
    directives: [SideNav] 
}) 


export class TodayComponent implements OnInit { 
    constructor(@Inject(ClothesService) _clothesService: ClothesService, @Inject(FirebaseRef) ref: Firebase) { 
     if (!ref.getAuth()) { 
      window.location.href="https://randohinn.com/wearnator-app/"; 
     } 
     console.log(this); 

     _clothesService.getClothes(ref).then(function(result) { 
      console.log(result); 
      if (!result) { 
       window.location.href = "clothes-list"; 
      } 
     }); 
     console.log(this); 
    } 

    openNav() { 
     document.getElementById("mySidenav").style.width = "250px"; 
     $('.overlay').css("visibility", "visible"); 
    } 

    closeNav() { 
     document.getElementById("mySidenav").style.width = "0"; 
     $('.overlay').css("visibility", "hidden"); 

    } 




} 

und HTML für sie

<div class="row"> 
    <header class="col-xs-12 center"> 
     <i class="fa fa-history header-left-action"></i> 
     <div class="header-title">Today</div> 
     <i (click)="openNav()" class="fa fa-ellipsis-v header-right-action"></i> 

    </header> 
</div> 
<SideNav></SideNav> 

Dies funktioniert vor Ort in Ordnung, aber wenn ich es auf the app site laden, wenn ich versuche, mit einem Klick openNav() aus dem HTML-Teil zu nennen, es Fehler, sagen openNav ist keine Funktion. Was könnte das sein? Die resultierende js hat die openNav-Funktion in sich.

Dies ist die resultierende js.

System.register(["angular2/core", "./clothes.service", 'angularfire2', './sidenav'], function(exports_1, context_1) { 
    "use strict"; 
    var __moduleName = context_1 && context_1.id; 
    var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { 
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; 
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); 
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; 
     return c > 3 && r && Object.defineProperty(target, key, r), r; 
    }; 
    var __metadata = (this && this.__metadata) || function (k, v) { 
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); 
    }; 
    var __param = (this && this.__param) || function (paramIndex, decorator) { 
     return function (target, key) { decorator(target, key, paramIndex); } 
    }; 
    var core_1, clothes_service_1, core_2, angularfire2_1, sidenav_1; 
    var TodayComponent; 
    return { 
     setters:[ 
      function (core_1_1) { 
       core_1 = core_1_1; 
       core_2 = core_1_1; 
      }, 
      function (clothes_service_1_1) { 
       clothes_service_1 = clothes_service_1_1; 
      }, 
      function (angularfire2_1_1) { 
       angularfire2_1 = angularfire2_1_1; 
      }, 
      function (sidenav_1_1) { 
       sidenav_1 = sidenav_1_1; 
      }], 
     execute: function() { 
      TodayComponent = (function() { 
       function TodayComponent(_clothesService, ref) { 
        if (!ref.getAuth()) { 
         window.location.href = "https://randohinn.com/wearnator-app/"; 
        } 
        console.log(this); 
        _clothesService.getClothes(ref).then(function (result) { 
         console.log(result); 
         if (!result) { 
          window.location.href = "clothes-list"; 
         } 
        }); 
        console.log(this); 
       } 
       TodayComponent.prototype.openNav = function() { 
        document.getElementById("mySidenav").style.width = "250px"; 
        $('.overlay').css("visibility", "visible"); 
       }; 
       TodayComponent.prototype.closeNav = function() { 
        document.getElementById("mySidenav").style.width = "0"; 
        $('.overlay').css("visibility", "hidden"); 
       }; 
       TodayComponent = __decorate([ 
        core_1.Component({ 
         selector: "today", 
         templateUrl: "app/html/today.component.html", 
         providers: [clothes_service_1.ClothesService], 
         directives: [sidenav_1.SideNav] 
        }), 
        __param(0, core_2.Inject(clothes_service_1.ClothesService)), 
        __param(1, core_2.Inject(angularfire2_1.FirebaseRef)), 
        __metadata('design:paramtypes', [clothes_service_1.ClothesService, Object]) 
       ], TodayComponent); 
       return TodayComponent; 
      }()); 
      exports_1("TodayComponent", TodayComponent); 
     } 
    } 
}); 
//# sourceMappingURL=today.component.js.map 

Und als Referenz, funktioniert diese Komponente sowohl auf lokale feine und

import {Component} from "angular2/core"; 
import {ClothesService} from "./clothes.service"; 
import {Cloth} from "./cloth"; 
import {AngularFire} from 'angularfire2'; 
import {Inject} from "angular2/core"; 
import {FirebaseRef} from 'angularfire2'; 
import {Rating} from './rating'; 
import {SideNav} from './sidenav'; 

@Component({ 
    selector: "today", 
    templateUrl: "app/html/additem.component.html", 
    providers: [ClothesService], 
    directives: [Rating, SideNav] 
}) 


export class AddItemComponent implements OnInit { 
    private rate: number = 3; 
    private photo: String; 
    private newItem: Cloth 
    private usersClothes: Array; 
    private user: String; 
    private refer: Firebase; 

    constructor(private _clothesService: ClothesService, @Inject(FirebaseRef) ref: Firebase) { 
     if (!ref.getAuth()) { 
      window.location.href="https://randohinn.com/wearnator-app/"; 
     } 
     var t = this; 
     _clothesService.getClothes(ref).then(function(result) { 
      if (result == null || result == undefined) { 
       t.usersClothes = new Array(); 
      } else { 
       t.usersClothes = result; 
      } 
     }); 
     this.user = ref.getAuth().uid; 
     this.refer = ref; 
    } 

    ngOnInit() { 
     var t = this; 
     $(document).ready(function() { 
      $.cloudinary.config({ cloud_name: "wearnator"}); 
      $("#selectedFile").unsigned_cloudinary_upload("af8fvvkw",{ cloud_name: 'wearnator' }); 
      $('#selectedFile').bind('cloudinarydone', function(e, data) { 
       t.photo= data.result.url; 
       $('.browseB').css("background-image","url("+t.photo+")"); 
      }); 
     }); 

    } 

    onUpdate(value) { 
     this.rate = value; 
    } 

    openNav() { 
     document.getElementById("mySidenav").style.width = "250px"; 
     $('.overlay').css("visibility", "visible"); 
    } 

    closeNav() { 
     document.getElementById("mySidenav").style.width = "0"; 
     $('.overlay').css("visibility", "hidden"); 

    } 

    onSave(name: String, type: String) { 
     this.newItem = new Cloth(name, type, this.photo, this.rate); 
     console.log(this.newItem); 
     this.usersClothes.push(this.newItem); 
     this.refer.child("clothes").child(this.user).set(this.usersClothes); 
     console.log(this.usersClothes); 
     window.location.href="/clothes-list"; 
    } 
} 

Answer 1

hochgeladen Ich glaube, ich habe es selbst herausgefunden. Es stellte sich heraus, dass FTP etwas seltsam macht, wobei die Uploads nicht immer überschrieben werden.