标签: angular-services

我正在构建具有 3d 模型列表的 Web 应用程序。我这样做是为了练习目的，以便获得有关 angular 2 的一些初步知识。

每个列出的模型都有名称、主图片、类别和滑块（图像数组）。

模型数据数组为：

export var MODELS: Model[] = [{ 
  id: 1, 
  name: 'Model 1', 
  image: 'app/img/models/model-1.jpg', 
  category: 'Cat 1',
  slides: [
    { alt: 'Model 1 front view' , url: 'app/img/models/model-2.jpg' },
    { alt: 'Model 1 rear view' , url: 'app/img/models/model-2.jpg' },
    { alt: 'Model 1 side view' , url: 'app/img/models/model-2.jpg' }
  ]  
},
{ 
  id: 2, 
  name: 'Model 2', 
  image: 'app/img/models/model-2.jpg', 
  category: 'Cat 2',
  slides: [
    { alt: 'Model 2 front view' , …

我正在放慢从 AngularJS 到 Angular(2+) 的迁移速度，并且偶然发现了一些东西。

在 AngularJS 中，我使用了很多工厂和服务来跨指令、控制器和其他服务共享数据。可以轻松地在一处更新服务并自动更新其他地方。

但是，我尝试在 Angular 5 中以类似的方式使用服务，但当我更改服务变量时，“什么也没发生”。

我见过一些解决方案，涉及创建“拉取”新数据的函数或建议更新“Angular 更改服务”以将事件绑定到变量。

但是，我的应用程序在许多位置使用了许多变量。我必须在使用它们的每个组件中单独订阅每个变量，并更改服务以对每个变量发出更改，这似乎并不正确。

我只是错过了什么吗？

谢谢！！！韦恩

例如：

主页的组件。

import { Component, OnInit } from '@angular/core';
import { HomeButtonDirective } from '../home-button.directive';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

在主页上重复使用的按钮的指令：

import { Directive, Input, OnInit, HostListener } from '@angular/core';
import { InfoService } from './info.service';

@Directive({
  selector: '[appHomeButton]',
  providers: [InfoService]
})
export class HomeButtonDirective {
  @HostListener('click', …

据我所知，我们在组件间和组件内通信的情况下使用服务，其中我们隐藏了多个或复杂的数据结构。我们真的只在持久化数据结构的情况下使用服务吗？那么在哪些情况下我们不应该使用服务呢？

我已经设置了一个带有 firebase 电子邮件和密码登录的身份验证防护，问题是它会自动触发到指定组件的路由。

我已经实现了身份验证保护并将其设置在正确的模块提供程序中（因为我的应用程序中有很多提供程序）。这是我的身份验证服务：

import { Injectable } from '@angular/core';
import { Router, Route ,CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, CanActivateChild, CanLoad } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { SimpleAuthService } from './simple-auth.service';

@Injectable()
export class AuthGuard implements CanActivate, CanActivateChild, CanLoad {
  constructor(private authService: SimpleAuthService) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    const url: string = state.url;
    return this.checkLogin(url);
  }

  canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    return this.canActivate(route, state);
  }

  canLoad(route: Route): Observable<boolean> {
    const url: string = …

当我尝试从我的 api 获取数据时，我在我的 angular 6 项目中收到此错误。这是我的 api json 文件；

{"data":
[{"category_name":"Women Ready Made","slug":null,"image_url":"education.jpg","products": 
[{"productName":"Kampala 
Shorts","description":"Beautiful Handwoven Kampala Shorts","imageUrl":"C:\\codes\\Tradsonline\\img\\image1.jpg","price":2500,"discount":10},{"productName":"Flowing White Agbada","description":"Flowing white agbada with beautiful design.","imageUrl":"C:\\codes\\Tradsonline\\img\\image3.jpg","price":22000,"discount":15}]},{"category_name":"Men's Ready Made","slug":null,"image_url":"education.jpg","products":[{"productName":"Ankara Jacket","description":"Ankara Jackets with pockets.","imageUrl":"C:\\codes\\Tradsonline\\img\\image2.jpg","price":5000,"discount":15},{"productName":"Women Ankara Gown","description":"Women Ankara gown with beautiful design.","imageUrl":"C:\\codes\\Tradsonline\\img\\image4.jpg","price":8000,"discount":0}]},{"category_name":"Ankara Gowns","slug":null,"image_url":"education.jpg","products":[]}]}

这是我的服务

getCategories(): Observable<Category[]> {
  return this.http.get(this.base_url + 'categories')
    .pipe(map(res => {
       return res.data; //this is where the error happens
}));

这是我对我的服务的进口

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { Product } from '../models/product';
import { …

在服务中发出 HTTP 请求时，我收到此响应：

TypeError: Cannot read property 'length' of null
    at eval (http.js:123)
    at Array.forEach (<anonymous>)
    at HttpHeaders.lazyInit (http.js:117)
    at HttpHeaders.init (http.js:265)
    at HttpHeaders.forEach (http.js:368)
    at Observable.eval [as _subscribe] (http.js:2172)
    at Observable.subscribe (Observable.js:162)
    at eval (subscribeToObservable.js:16)
    at subscribeToResult (subscribeToResult.js:6)
    at MergeMapSubscriber._innerSub (mergeMap.js:127)
ALERT!!!!! 

我在加载组件时订阅了 HTTP 请求：

export class TasksComponent implements OnInit {
  currentUser:any;
  username:string=null;
  constructor(private usersService:UsersService) {}
  ngOnInit() {
    this.username=localStorage.getItem('currentUsername');
    console.log(this.username);
    this.usersService.getUserByUsername(this.username)
      .subscribe(data=>{
        console.log(data);
        this.currentUser=data;
      },err=>{
        console.log(err);
        console.log("ALERT!!!!! ");
      })
  }
}

用户服务：

//for getting a user by its username …

所以我有一个表格组件。但是表组件需要使用适当的 API 服务，具体取决于它是由 ComponentA 还是 ComponentB 调用。

例如，如果 ComponentB 使用 TableComponent，那么它需要让 TableComponent 注入 APIForB 服务并使用它来填充表。

角度新手，所以不确定这样的事情是否可能。

我试图从这篇文章中获得提示 - 使用$ scope.$ emit和$ scope.$ on 但是当控制器彼此无关时,似乎没有任何工作.

那是 -

<div ng-controller="CtrlA">
</div>

<div ng-controller="CtrlB">
</div>

在CtrlB中我会做这样的事情:

$rootScope.$broadcast('userHasLoggedIn', {})

在CtrlA中,我会这样听:

$rootScope.$on('userHasLoggedIn, function(event, data){});

并且没有 - 除非我在CtrlA div中嵌入CtrlB div,否则CtrlA永远不会收到广播事件

任何的想法？

我有一个听起来可能很愚蠢的场景，但是我被困住了，试图理解是什么导致了它不起作用。

我有一个现在有三个模块的角度应用程序

var app = angular.module('mainApp', ['ngRoute']); //parent module
var reviewModule = angular.module('reviewModule', ['mainApp']);  //child 1
var searchmodule = angular.module('searchmodule', ['mainApp']);  //child 2

我已经在我的父模块（即mainApp）中设置了一些配置和默认字符串，我希望在其所有子模块中使用它。

另一方面，我的reviewModule和searchmodule（子模块）具有单独的控制器和服务，这些控制器和服务在不同的路线上使用。现在，问题来了，当我想将一个模块的服务用于另一个模块时，例如，如果我执行以下操作

var searchmodule = angular.module('searchmodule', ['mainApp', 'reviewModule']);

在我的搜索模块控制器中使用reviewModule服务时，出现一个异常提示

Error: $injector:modulerr Module Error
Failed to instantiate module searchmodule

两个子模块都具有相同的父模块，我想将一个子模块用于另一个子模块，并且不明白为什么会收到此异常。

更新：

我什至尝试使用以下行进行模块声明

var searchmodule = angular.module('searchmodule', ['reviewModule']);

但这也会引起异常。

我正在创建一个dataService来处理所有的http连接,这是我的代码:

(function(){
angular.module('theswapp')
       .factory('dataService',['$http','$q',function($q, $http){

        function getTeamCheckInData(){
            return $http.get('assets/js/data.json');
        }

        return {
            getTeamCheckInData : getTeamCheckInData
        };

  }]);
})();

在我的控制器中注入它并对其进行调用后,我在返回时遇到错误$ http.get('assets/js/data.json'); .Error说$ http.get不是一个函数