标签: angular-services

所以我已经玩过承诺在服务和控制器中解决.我宁愿在服务中解决它,所以我可以重用变量而不必多次解决它.

我遇到的问题是它有效,但它返回的数据非常缓慢.所以我觉得我在这里做错了.我的ng-options填充大约需要5或6秒.哪个更好？我如何改进我的代码,使其运行得更快？

已解决服务:

resortModule.factory('locaService',['$http', '$rootScope', function ($http, $rootScope){
    locaService.getLocations=
        function() {
            return $http.get('/api/destinations').then(
                function(result){
                    locaService.locations= result.data;
                    return locaService.locations;
                }
            );
        return locaService.locations;
    };
resortModule.controller('queryController',['$scope', 'locaService', function($scope, locaService) {
    $scope.getLocations= locaService.getLocations().then(function(result){
       $scope.locations= result;
    });
}]);

已在控制器中解决:

resortModule.factory('locaService',['$http', '$rootScope', function ($http, $rootScope){
locaService.getLocations=
    function() {
        locaService.locations= $http.get('/api/destinations');
        //stores variable for later use
        return locaService.locations;
    };
}]);
resortModule.controller('queryController',['$scope', 'locaService',          
    function($scope, locaService) {
       locaService.getLocations()
       .then(
            function(locations) // $http returned a successful result
            {$scope.locations = locations;} //set locations to returned data
       ,function(err){console.log(err)});
}]);

HTML:

<select …

我想上传图片并将其保存在服务器中.我上传的图像也得到了预览,但我仍然坚持将该图像发送到服务器.我想使用角度服务将此图像发送到服务器.

这是html代码

<input type="file" fileread="vm.uploadme" />
<img src="{{vm.uploadme}}" width="100" height="50" alt="Image preview...">

这是指令

(function(){
    angular.module('appBuilderApp').directive("fileread", [function () {
        return {
            scope: {
                fileread: "="
            },
            link: function (scope, element, attributes) {
                element.bind("change", function (changeEvent) {
                    var reader = new FileReader();
                    reader.onload = function (loadEvent) {
                        scope.$apply(function () {
                            scope.fileread = loadEvent.target.result;
                        });
                    }
                    reader.readAsDataURL(changeEvent.target.files[0]);
                });
            }
        }
    }]);
})();

设置:我希望有一个服务,多个控制器可以查询使用$ http提取的数据.最初的解决方案是使用此处建议的promises .

问题:每次控制器查询服务时,服务都会返回$ http保证,从而导致多次查询只是从远程服务器中反复提取相同的数据.

解决方案:服务函数返回数据或下面的承诺.并由控制器进行相应的检查和操作.

app.factory('myService', function($http) {
    var items = [];
    var myService = {
        getItems: function() {
            // if items has content, return items; otherwise, return promise.
            if (items.length > 0) {
                return items;
            } else {     
                var promise = $http.get('test.json').then(function (response) {
                    // fill up items with result, so next query just returns items.
                    for(var i=0;i<response.data.length;i++){
                        items.push(response.data[i]);
                    }
                    return items;
                });
                // Return the promise to the controller
                return promise;
            } …

在引用此链接之后,我正在尝试将JSON数据放入我的角度服务中.

服务:

.factory('restservice', ['$rootScope','$http', '$q', '$log',
function($rootScope,$q, $http) {
return {
    getData: function() {
        var defer = $q.defer();
        $http.get('xyz.com/abc.php', { cache: 'true'})
        .success(function(data) {
            defer.resolve(data);
        });

        return defer.promise;
      }
};
}])

控制器:

.controller('RestaurantsCtrl', function ($scope,$http, restservice,restViewservice){

      restservice.getData().then(function(data) {
      $scope.Restaurants = data;
    });

})

实现此控制台后,'$ q.defer不是函数'.

这是什么问题？请帮忙 ...!!对于Angular Js来说,如果出现问题,请原谅.

一种常见的做法是将服务包括在 @NgModule.providers

@NgModule({
  providers: [
    MessageService
  ]
})

根据Angular 教程，您可以提供服务而无需在@NgModule装饰器中指定它，通过使用@injectable.providedIn

@Injectable({
  providedIn: 'root',
})
export class MessageService {...}

使用 Angular 教程中介绍的方法有什么好处吗？

我正在做 Angular Tour-hero 项目（用“User”替换 Hero）。当我将英雄（用户）和英雄详细信息（用户详细信息）分开时，当我尝试访问详细信息时，它没有显示，更新功能也不起作用。它显示此错误：

错误 TS2532：对象可能“未定义”。

6 <input id="用户名" [(ngModel)]="用户名" placeholder="名称">

我认为，目的user是提出问题。但是当我尝试完全按照教程添加 MessageService 等操作时，它就起作用了。但是当我删除所有这些时，它给出了这个错误。先谢谢您的帮助。

用户详细信息.component.html：

<div>
  <h2>{{user.name | uppercase}} Details</h2>
  <div><span>id: </span>{{user.id}}</div>
  <div>
        <label for="user-name">User name: </label>
        <input id="user-name" [(ngModel)]="user.name" placeholder="name">
    </div>
    <button (click)="goBack()">Back</button>
    <button (click)="save()">Save</button>
</div>

用户详细信息.component.ts：

import { Component, OnInit } from '@angular/core';
import { User } from 'src/app/model/user';
import { UserService } from 'src/app/services/user/user.service';
import { Location } from '@angular/common';
import { ActivatedRoute } from '@angular/router';


@Component({
  selector: 'app-user-detail',
  templateUrl: './user-detail.component.html',
  styleUrls: ['./user-detail.component.scss']
}) …

简单且常见的 Angular2+ 数据服务，处理错误并使用 Promises：

// imports skipped

class DataType {}

class Error {
  constructor(error: HttpResponse) {
    this.error = error.json()
  }
}


@Injectable()
export class MyService<DataType> {
  apiUrl = 'my/url';
  constructor(protected http) {}

  get(): Promise<DataType[] | Error> {
    return this.http
    .get(this.apiUrl)
    .toPromise()
    .then(response => response.json())
    .catch(this.handleError);
  }

  protected handleError(error: HttpResponse): Promise<Error> {
    console.error('An error occurred', error);
    return Promise.reject(new Error(error));  
  }
}

在此类中，get方法返回一个 Promise，它用数组解析DataType[]，并用Error类型拒绝。

编译此代码，我收到此错误：

输入“错误| DataType[]' 不可分配给类型“DataType”。类型“Error”不可分配给类型“DataType”。

我正在使用 TypeScript 版本 2.4.2。我确信这种情况是在 TypeScript 升级之后开始发生的，这使得类型检查更加严格。

我想知道如何处理最新 TypeScript …

在 Angular 2 中，我在以下位置定义了路由app.module.ts：

const appRoutes: Routes = [
  { 
    path: '',
    component: HomeComponent,
  },
  {
    path: 'admin',
    component: AdminComponent,
  }
];

我还有一个app.component显示菜单和搜索表单的。它app.component连接到一个服务 ( events.service.ts)，该服务返回一个数组events。当提交搜索表单时，app.component调用服务来过滤事件，然后抓取它们：

getEvents(): void {
    this.eventsService.getEvents().then(events => {this.events = events});
}

onSubmit() {
    this.searchTerm = this.model.searchTerm;
    this.eventsService.search(this.searchTerm).then(res => this.getEvents());
}

我希望能够this.events从向下传递到(和)app.component中指定的两条路线。app.modulehomeadmin

我home.component.ts需要相同的events.service.ts，并在函数中从中获取事件onNgInit，但是当服务中的事件已通过 中的搜索进行更新时app.component.ts，在 的 初始化中获取的事件home.component.ts已过期。我希望它们能够同步。

我有一个 Angular 5 应用程序，我正在尝试使用 Google OAuth 登录来获取用户名，然后在服务中设置该用户名以用作登录用户。在添加登录名之前，我在服务中手动设置了该值，并且没有问题。现在我正在从 Google 登录设置用户名，看起来每次页面刷新（或调用服务的新实例时）我设置的值都会丢失。

该值从 Google 登录正确返回（我在控制台中检查过），所以我知道那里一切正常。我对 Angular 服务的印象是它们在其他模块中保持不变？是不是每次我调用该服务时都会创建一个新的空“tempuser”变量？如果是这样，有什么办法可以解决这个问题，以便我可以在整个应用程序中保留该值，直到用户注销？

这是服务本身：

import { Injectable } from '@angular/core';
import { Http, Response, Headers } from "@angular/http";

@Injectable()
export class WmApiService {

  //private _baseUrl = "http://wm-api.webdevelopwolf.com/"; // Test server api
  private _baseUrl = "http://localhost:58061/"; // Dev server api 
  tempuser = "";
  tempuseravatar = "";
  tempuserfullname = "";
  tempuseremail = "";
  userloggedin = 0;
  modules: any;

  constructor(private _http: Http) {
    console.log('Wavemaker API Initialized...');
  }

  // On successful API call …

我有一个升级到 angular 9 的 angular 应用程序，我在其中使用了 angular 元素，它也升级到了 angular 9。我有一个服务模块（angular 9），我正在我的 angular 应用程序中导入它。我的 angular 元素也导入了相同的服务。我希望在我的 angular 应用程序和 angular 元素之间共享该服务的单个实例。Angular 9 提供了新的服务注入选项，现在称为“平台”。根据角度文档https://next.angular.io/api/core/Injectable

'platform' ：页面上所有应用程序共享的特殊单例平台注入器。

我将我的服务更改为从根注入到平台级别。但我仍然看到我的服务的两个实例，一个在我的应用程序中，另一个在 angular 元素中。

@Injectable({providedIn: '平台' })

如何在我的应用程序和 angular 元素之间共享我的服务的单个实例。