标签: angular-services

我正在尝试使用DomSanitizer来清理组件中的动态URL,我似乎无法弄清楚为此服务指定Provider的正确方法是什么.

我正在使用Angular 2.0.0-rc.6

这是我目前的组成部分:

@Component({
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ],
    providers: [ DomSanitizer ],
})
export class AppComponent implements OnInit
{
    public url: SafeResourceUrl;

    constructor(private sanitizer: DomSanitizer) {}

    ngOnInit() {
        let id = 'an-id-goes-here';
        let url = `https://www.youtube.com/embed/${id}`;

         this.videoUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url);
    }

    ngOnDestroy() {}
}

这会导致this.sanitizer.bypassSecurityTrustResourceUrl is not a function运行时出错.

有人能告诉我一个如何正确提供DomSanitizer提供商的例子吗？谢谢!

我需要在服务和指令脚本文件中使用angular2的日期管道(不仅仅是HTML).

有人有想法吗？

无法上传代码有些政策限制,对不起.

我在我的角应用程序中有一个服务,看起来像这样:

angular.module('BracketService', []).factory('BracketService', [function() {
    function compareByWeight(a, b) {
        return a.weight - b.weight;
    }
    function filterWeightGroup(competitors, lowWeight, highWeight) {
        //filter stuff
    }
    function createBracketsByWeightGroup(weightGroup) {
        //create some brackets
    }
    //set some base line values
    var SUPER_HEAVY_WEIGHT = 500;
    var SUPER_LIGHT_WEIGHT = 20;
    return {
        //create brackets from a list of competitors
        returnBrackets: function(competitors) {
            var brackets = {};
            //get super light weights
            brackets.superLightWeights = createBracketsByWeightGroup(
                filterWeightGroup(competitors, 0, SUPER_LIGHT_WEIGHT)
                .sort(compareByWeight)
            );
            brackets.superHeavyWeights = createBracketsByWeightGroup(
                filterWeightGroup(competitors, SUPER_HEAVY_WEIGHT, Infinity)
                .sort(compareByWeight)
            );
            brackets.middleWeights = …

在处理我面临的问题的程序时，构造函数及其子类的依赖注入。

• DataService：一个服务类，它在一个地方拥有所有的 CRUD 操作，还有一个参数化的构造函数，用于从其子类注入端点 URL 和 HTTP。

constructor(private url: string, private http: Http) { }

• PostService：一个服务类，它扩展了上述 DataService 类以在其中包含 CRUD 操作功能和一个参数化的构造函数，并在内部调用 super(endPointURL, httpObject) ，如下所示：

constructor(http: Http) {
    super('https://jsonplaceholder.typicode.com/posts', http);
}

在此重构之前（移动所有常见的 CRUD 操作并通过子类扩展它），我的代码按预期工作，但在进行上述更改后，我收到以下错误：

Date: 2020-03-22T15:26:23.248Z - Hash: 7130497a38c152c58258
5 unchanged chunks

Time: 1859ms

ERROR in src/app/services/data.service.ts:14:23 - error NG2003: No suitable injection token for parameter 'url' of class 'DataService'.
Found string

14   constructor(private url: string, private http: Http) { }

此外，当我从 Datsource 构造函数中删除url参数（相应地修改 PostService.ts）时，api 按预期工作。 …

我是角度框架的新手.这是我的场景,我想在一段时间后更改我的$ scope.variable,所以我使用了javascript setTimeout方法.

$scope.variable = 'Previous';

setTimeout(function(){
  $scope.variable='NEXT';
},3000);

这段代码对我不起作用.我曾经$apply()使这个代码工作.

后来我才知道angular本身有一个$ timeout服务,可以做同样的工作.

$scope.variable = 'Previous';

$timeout(function () {
  $scope.variable = 'NEXT';
}, 2000);

我怎样才能比较$timeoutjavascript 的服务性能setTimeout？

我们为什么要用$timeout而不是setTimeout??

请给我一些使用它的例子和理由,它显示了性能.

谢谢 :)

Angular 5

什么时候创建和销毁服务,它的生命周期挂钩(如果有的话)是什么,它的数据如何在组件之间共享？

编辑:澄清一下,这不是关于组件生命周期的问题.这个问题是关于服务的生命周期.如果服务没有生命周期,那么组件和服务之间的数据流如何管理？

Angular v4:我们是将数据存储在服务或组件中还是两者都存储？

在阅读了不少教程之后,以及阅读Angular的文档,我仍然不清楚这个主题.

https://angular.io/tutorial/toh-pt2 Angular的教程清楚地显示了存储在Component中的数据.

https://angular.io/guide/architecture#services Angular的架构>服务部分显示了具有数据数组的服务的代码(这是正确的吗？).

如果我们将数据存储在Components中,我们会大量使用@Input和@Output在子组件之间移动数据(假设我们希望这些数据在前端),但是当我们使用路由时会出现问题,我们需要新的组件从路由器插座加载,以便对我们的服务进行新的调用,以便向我们的服务器进行API调用以保存数据.可能在这种情况下,我们将有2个组件保存相同的数据 - 但它们可能不匹配.

如果我们将数据存储在服务中,我们会大量使用我们的服务来检索数据和操作数据(假设我们希望这些数据在前端),这样我们的服务就可以保存1组数据,并且每个组件都可以调用服务数据随时获取一致的数据.

-

存储数据的正确方法是什么？是其中一个没有建议吗？

如何创建全局可访问的服务,currentUser()只在页面加载时调用服务器一次,如果用户登录然后保留它并向控制器或状态提供数据直到注销？现在我在许多州或控制器中解决了很多次currentUser(),我在docs中发现:authparseresponse它可以自己做服务,但我不知道如何以正确的方式处理这个问题.

例如在ui-router中我有两个服务器调用,只有在加载页面时才足够:

.state('login', {
  url: '/login',
  templateUrl: 'auth/_login.html',
  controller: 'AuthCtrl',
  onEnter: [
    '$state', 'Auth',
    function($state, Auth) {
      Auth.currentUser().then(function() {
        $state.go('home');
      });
    }
  ]
})
.state('dashboard', {
  url: '/dashboard',
  templateUrl: 'dashboard.html',
  onEnter: [
    '$state', 'Auth',
    function($state, Auth) {
      Auth.currentUser().then(function(user) {}, function(err) {
        $state.go('home');// user not logged in
      });
    }
  ]
})

或者每次在NavController中调用下一个服务器:

app.controller('NavController', [
  '$state', '$scope', 'Auth', function($state, $scope, Auth) {
    $scope.signedIn = Auth.isAuthenticated;
    $scope.logout = Auth.logout; // logout function
    Auth.currentUser().then(function(user) {
      $scope.user = user; …

我有以下工厂定义:

angular.module("account").factory("users",["$http",
    function(a){
      return {
         getUser: function(){
            return a.get("/user/me").then(function(r){
                return r.data;
            });
        }
    };
  }
]);

而我的控制器:

angular.module("test.controllers",["account"])
.controller("TestCtrl",["$scope","users",
    function(a,u){
        a.user = u.getUser();
        console.log(a.user);
}]);

这是console.log:

 d {$$state: Object, then: function, catch: function, finally: function} $$state: Object status: 1 value: Object user: Object__v: 0 _id: "54c1fg29f36e117332000005" temp: "1ce3793175e0b2548fb9918385c2de09"  __proto__: Object __proto__: Object __proto__: Object __proto__: Object

上面的代码返回一个状态对象而不是用户对象.但是从日志中,状态对象具有值内的用户对象.我如何获得用户对象？或者我这样做完全错了吗？

我知道另一种方法是返回$ http.get并在控制器中调用then()方法.但我会经常使用用户对象,如果我在控制器中调用then()方法,它几乎与在控制​​器而不是工厂中使用$ http.get相同.

这是一个有趣的问题:我正在尝试测试使用Ionic BarcodeScanner的服务.我有一个基于离子单元测试库的repo ,以便尝试测试.我正在嘲笑BarcodeScanner.scan方法spyOn(..).and.callFake(..)

问题:当我从组件调用扫描方法时,它可以工作.当我在服务中执行完全相同的操作时,它会抛出超时.

组件测试代码:

it("should be able to set a spy on the scanner and test the component", done => {
    const testBC = "123456";
    const spy = spyOn(TestBed.get(BarcodeScanner), "scan");
    spy.and.callFake(() => {
        return new Promise((resolve, reject) => {
            resolve(testBC);
        })
    });

        component.testScanner().then(res => {
            expect(res).toBe(testBC);
            done();
        }, reason => {
            expect(true).toBe(false);
            done();
        })
});

服务测试代码:

it("should be able to set a spy on the scanner and test the service", done => {
    const testBC = …