标签: angular5

我是Angular2/4/5的新手,几天前我用TypeScript在Angular5中开始我的新项目.

我必须跟踪组件中的路由循环.

有可能实现吗？

我非常感谢您的宝贵意见.提前致谢.

Given the example at https://material.angular.io/components/form-field/overview

<div class="example-container">
  <mat-form-field>
    <input matInput placeholder="Enter your email" [formControl]="email" required>
    <mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
  </mat-form-field>
</div>


import {Component} from '@angular/core';
import {FormControl, Validators} from '@angular/forms';

/** @title Form field with error messages */
@Component({
  selector: 'form-field-error-example',
  templateUrl: 'form-field-error-example.html',
  styleUrls: ['form-field-error-example.css']
})
export class FormFieldErrorExample {
  email = new FormControl('', [Validators.required, Validators.email]);

  getErrorMessage() {
    return this.email.hasError('required') ? 'You must enter a value' :
        this.email.hasError('email') ? 'Not a valid email' :
            '';
  }
}

The error seems to be …

所以,我试图解决这个问题.但是,不知怎的,我无法这样做,可能是因为角度5缺乏知识.这是我的服务:

GetCurrentUserData(): Observable<ResponseData> {
    return this.http.get<ResponseData>(ApplicationURLS.GetCurrentUserInformation)
        .map(response => {
            return response;
        });
    //.catch(error => this.handleError(error));
}

这是我的组成部分:

public GetCurrentUserInformation(): any {

        return this.loginService.GetCurrentUserData().subscribe(data => { return data; });
    }

在这里,我试图访问数据:

ngAfterViewInit() {
        debugger;                
        this.responseData = this.GetCurrentUserInformation();
        if (this.responseData.code != responseCodes.success) {
            this.googleInit();
        }

    }

当我检查this.responseData时,它总是返回此而不是我想要的数据:

我只想进行同步调用,这样我就可以立即获取数据.

我也尝试在服务中使用do()但它返回的do()不是函数.

我正在尝试将文件与FormData一起保存在Angular 5中。我可以获取单个文件，但是不知道如何获取所有文件。我有三个图像文件和输入字段，尝试搜索示例。但是只能上传多个文件。我想从此表单上载每个文件。

下面是我的代码：

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Location } from '@angular/common';
import { ActivatedRoute } from '@angular/router';
import { Category } from '../../../shared/services/categories/category';
import { CategoriesService } from '../../../shared/services/categories/categories.service';

@Component({
  selector: 'app-add-category',
  templateUrl: './add-category.component.html',
  styleUrls: ['./add-category.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class AddCategoryComponent implements OnInit {
  
  category: Category = new Category();
  fileToUpload: File = null;
  
  constructor(
    private categoriesService: CategoriesService,
    private route: ActivatedRoute,
    private location: Location  
  ) { }

  ngOnInit() {
  }

  goBack(): void {
    this.location.back(); …

我在Angular 5中遇到HttpClient的问题。HttpClient在两个指定的组件上不发送任何请求（控制台中没有任何xhr登录）。在其他组件上，一切都很好。

从组件A调用ApiService POST方法（类似于HttpClient的包装程序的自定义服务），但是当我从组件B调用此方法时， HttpClient似乎被冻结。

我的应用程序中有许多使用ApiService的组件。一切都注入良好。我不知道怎么了。

---回应

ApiService.ts

@Injectable()
export class ApiService
{
    private errorListeners : Map<string, Array<(details ?: any) => any>> =
        new Map<string, Array<(details ?: any) => any>>();

    public constructor(private http: HttpClient)
    {

    }

    public post<T>(path : string, data : any, urlParams : any = null) : Observable<any>
    {
        return this.http.post<T>(`${environment.api.path}${path}`, data, {
            params: urlParams
        }).catch(this.catchErrors()).map(response => {
            if (response['Error']){
                throw response['Error'];
            }

            return response;
        });
    }

}

- 零件

   @Component({
    selector: 'login-register-component',
    templateUrl: …

我使用'rxjs-websockets'来连接websockets.但在一定时间(约2分钟)后,连接关闭.在手动关闭之前,如何保持连接.

这是我使用的代码片段

constructor(private socketService: WebSocketService) {}

this.socketService.connect('/endpoint');
this.socketSubscription = this.socketService.messages
      .subscribe(result => {            
            // perform operation
    });

这是WebSocketService

import {Injectable} from '@angular/core';
import {QueueingSubject} from 'queueing-subject';
import {Observable} from 'rxjs/Observable';
import websocketConnect from 'rxjs-websockets';
import 'rxjs/add/operator/share';
import 'rxjs/add/operator/retryWhen';
import 'rxjs/add/operator/delay';

@Injectable()
export class WebSocketService {
  private inputStream: QueueingSubject<string>;
  public messages: Observable<string>;

  constructor() {    
  }

  public connect(socketUrl) {
      this.messages = websocketConnect(
        socketUrl,
        this.inputStream = new QueueingSubject<string>()
      ).messages.retryWhen(errors => errors.delay(1000))
        .map(message => JSON.parse(message))
        .share();
  }

  public send(message: string): void {
    this.inputStream.next(message);
  } …

我当时正在编程一个非常不错的API，使用json从游戏服务器到我的网站空间获取一些json数据，

但是每次我使用angular发送请求时，我都会得到以下信息：127.0.0.1--[20 / Mar / 2018 17:07:33]代码400，消息错误的请求版本（“？\ x9c ?? {？'\ x12 \ x99 ??? \ xadH \ x00 \ x00 \ x14？+？/？，？0？\ x13？\ x14 \ x00 / \ x005 \ x00“）127.0.0.1--[20 / Mar / 2018 17:07 ：33]“？\ x9dtTc？\ x93？4？M ????? \ x9c ?? {？'\ x99 ???? H？+？/？，？0 ?? / 5/5” HTTPStatus.BAD_REQUEST- 127.0.0.1--[2018年3月20日17:07:33]代码400，消息错误的请求语法（'\ x16 \ x03 \ x01 \ x00？\ x01 \ x00 \ x00 \ x9d \ x03 \ x03？k， ＆?? ua \ x8c \ x82 \ x17 \ x05？QwQ …

在互联网上,我找到了如何与服务共享数据的示例:

import { Injectable } from '@angular/core';
import {Subject} from 'rxjs/Subject';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class DataService {

  private subject = new Subject<any>();

  sendData(phone: any) {
    this.subject.next(phone);
  }

  clearData() {
    this.subject.next();
  }

  getData(): Observable<any> {
    return this.subject.asObservable();
  }

}

然后我们订阅更改

subscription: Subscription;

this.subscription = this.dataService.getData()
  .subscribe(data => {
     this.someData= data;
  });

好的,这工作正常.但是,如果我想分享多个元素？为每个元素复制此代码似乎是不合理的,只更改名称.但我找不到任何抽象的解决方案.也许使用带有名称和数据本身的地图,但我无法理解如何在这种情况下订阅更改以及应该如何看待服务.

当我尝试在Angular 5/Firebase5应用程序中订阅AngularFireList时出现以下错误.

zone.js:192 Uncaught TypeError: Object(...) is not a function
    at SwitchMapSubscriber.eval [as project] (changes.js:7)
    at SwitchMapSubscriber._next (switchMap.js:91)
    at SwitchMapSubscriber.Subscriber.next (Subscriber.js:95)
    at RefCountSubscriber.Subscriber._next (Subscriber.js:131)
    at RefCountSubscriber.Subscriber.next (Subscriber.js:95)
    at Subject.next (Subject.js:56)
    at ConnectableSubscriber.Subscriber._next (Subscriber.js:131)
    at ConnectableSubscriber.Subscriber.next (Subscriber.js:95)
    at Notification.observe (Notification.js:32)
    at AsyncAction.DelaySubscriber.dispatch (delay.js:91)

我的服务和控制器类内容如下,

1)名为'FirebaseService'的服务

customers: AngularFireList<any>;
getCustomers(){
    this.customers = this.fire.list('users');
    return this.customers;
  }

2)控制器

constructor(private firebase: FirebaseService) { }

serviceProviders: ServiceProvider[];
var x = this.firebase.getServiceProviders();
    x.snapshotChanges().subscribe(item => {
      this.serviceProviders = [];      
      item.forEach(element => {
        var y = element.payload.toJSON();
        y["$key"] = …

当前如何在Angular 5中下载图像我正在使用saveAs函数

import { saveAs } from 'file-saver'

var blob = new Blob([this.attachment], { type: "image/png" });
console.log(blob);
console.log(window.btoa(blob.toString()));

if (this.attachment != null) {
  saveAs(blob, 'attachment');
}

在这种情况下，下载图像但打开错误。