小编Mac*_*der的帖子

http post - 如何发送Authorization标头?

如何在Angular2 RC6中为您的http请求添加标头?我得到以下代码:

login(login: String, password: String): Observable<boolean> {
    console.log(login);
    console.log(password);
    this.cookieService.removeAll();
    let headers = new Headers();
    headers.append("Authorization","Basic YW5ndWxhci13YXJlaG91c2Utc2VydmljZXM6MTIzNDU2");
    this.http.post(AUTHENTICATION_ENDPOINT + "?grant_type=password&scope=trust&username=" + login + "&password=" + password, null, {headers: headers}).subscribe(response => {
      console.log(response);
    });
    //some return
}
Run Code Online (Sandbox Code Playgroud)

问题是,angular不会添加Authorization标头.而不是那样,在请求中我可以看到以下附加标题:

Access-Control-Request-Headers:authorization
Access-Control-Request-Method:POST
Run Code Online (Sandbox Code Playgroud)

并在Accept-Encoding中添加了sdch:

Accept-Encoding:gzip, deflate, sdch
Run Code Online (Sandbox Code Playgroud)

不幸的是,没有授权标头.我该如何正确添加?

我的代码发送的整个请求如下:

OPTIONS /oauth/token?grant_type=password&scope=trust&username=asdf&password=asdf HTTP/1.1
Host: localhost:8080
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Access-Control-Request-Method: POST
Origin: http://localhost:3002
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36
Access-Control-Request-Headers: authorization
Accept: */*
Referer: …
Run Code Online (Sandbox Code Playgroud)

authentication rest http typescript angular

43
推荐指数
4
解决办法
12万
查看次数

从服务触发组件视图的更新 - 没有ChangeDetectorRef的提供者

我想用udpate我的应用程序视图,由服务事件触发.

我的一个服务注入了ChangeDetectorRef.编译工作正常,但是当App被引导时,我在浏览器中出现错误:No provider for ChangeDetectorRef!.

我以为我需要将它添加到我的AppModule中,但我找不到任何表明它在我可以导入的模块中的文档.我尝试将类本身添加到导入数组,但这导致了错误.尝试将其添加到模块中的providers数组时,我也遇到错误.这是我的服务的简化版本:

import {Injectable, ChangeDetectorRef } from '@angular/core';

@Injectable()
export class MyService {
  private count: number = 0;
  constructor(private ref: ChangeDetectorRef){}

  increment() {
    this.count++;
    this.ref.detectChanges();
}
Run Code Online (Sandbox Code Playgroud)

和app模块:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { MyService } from './my.service';

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ AppComponent ],
  providers: [ MyService ],
  booststrap: [ AppComponent ]
})
export AppModule {}
Run Code Online (Sandbox Code Playgroud)

UPDATE

我已经尝试删除我对ChangeDetectorRef的使用,但我仍然遇到同样的问题.我猜我更新了我的System …

typescript angular2-changedetection angular

40
推荐指数
2
解决办法
2万
查看次数

将字体导入角度4 cli Web应用程序的最佳实践/样式

我一直在研究Angular 4个人项目,并希望将Ubuntu字体系列添加到我的Angular应用程序中.向项目添加大量自定义字体的最佳做法或风格是什么?我公司目前已保存了Ubuntu字体家族成/assets/fonts/ubuntu-font-family-0.83并把它添加到最外部组件的CSS文件,与字型app.component.css.

@font-face {
   font-family: 'Ubuntu';
   src: url('/assets/fonts/ubuntu-font-family-0.83/Ubuntu-R.ttf');
}
Run Code Online (Sandbox Code Playgroud)

通过将其放在原始组件中,我不必重新定义嵌套组件中的字体,我只是将其视为默认字体系列.

是否有更清晰/更好的方法来做到这一点,仍然删除重复的代码?

html css fonts angular

22
推荐指数
2
解决办法
4万
查看次数

Angular2材质'md-icon'不是已知元素

我有angular2应用程序,它使用@ angular2-material 2.0.0-alpha.8-2版本.一切正常.现在我决定将材料版本升级到最新版本,即2.0.0-alpha.9-3.我按照GETTING_STARTED中提到的步骤进行操作.之前我已经导入了以下单个模块:

@NgModule({
imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule,

    MdIconModule,
    MdButtonModule,
    MdCardModule,
    MdCheckboxModule,

    ....
    ....  
Run Code Online (Sandbox Code Playgroud)

但是2.0.0-alpha.9-3版本的更改日志说:

"角度材料已从@ angular2-material/...包更改为@ angular/material下的单个包.随着此更改,还有一个新的NgModule,MaterialModule,其中包含所有组件."

所以我删除了明确导入的材料模块并将其更改为:

@NgModule({
imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule,

    MaterialModule.forRoot(),
    ....
    ....
Run Code Online (Sandbox Code Playgroud)

在此更改后,我收到以下错误

'md-icon'不是已知元素:

  1. 如果'md-icon'是Angular组件,则验证它是否是此模块的一部分.
  2. 如果'md-icon'是Web组件,则将"CUSTOM_ELEMENTS_SCHEMA"添加到此组件的'@NgModule.schemas'以禁止显示此消息.

我是否需要显式导入单个模块,或者如更改日志中所述,MaterialModule包含所有组件,我不应该显式导入单个模块?如果我不应该导入单个模块那么可能是错误的来源?

typescript angular-material2 angular

21
推荐指数
3
解决办法
5万
查看次数

如何在Heroku上部署微服务

我已经阅读了很多关于微服务的内容,并希望用这种方法构建我的应用程序.到目前为止我所知道的是我有一些服务,比如:

  • 负载均衡器 - 处理每个请求,并将其推送到其他服务
  • 授权服务 - 授权我的用户
  • 数据库 - 用于我的微服务.我想为每个服务使用一个具有不同模式的DB实例.
  • 服务A - 用于功能A.
  • 服务B - 用于功能B.

  • 等等

我发现,Heroku是部署应用程序的有趣场所.我的问题是我完全不理解他们的意识形态.到目前为止我所做的是创建/注册几个"应用程序":

  • 我-APP-AUTH
  • 我的应用程序内的负载均衡
  • 等等

我知道,Heroku为每个应用程序提供了一些公共主机名,这就是我的担忧开始的地方.我应该使用公共主机名部署我的内部服务吗?我不这么认为.在这里,我的问题来了:

任何人都可以提供一些指导,如何处理Heroku上的微服务?我应该如何部署它们?我应该如何定义负载均衡器,并将内部服务挂钩?什么是JHipster?我需要它吗?我怎么用呢?我应该使用Heroku工具(例如CLI)还是可以使用我的gitlab repo?关于那个,我在互联网上找不到任何关注点.

architecture heroku jhipster microservices

16
推荐指数
1
解决办法
6793
查看次数

从另一个角度4获取值

我有两个独立的组件; 一个包含选择搜索框的标题组件,stats组件根据选择框的值显示结果,我想知道一旦选择框改变是否可以刷新结果,我想到使用LocalStorage但它似乎是一个懒惰的解决方案.

angular

13
推荐指数
2
解决办法
3万
查看次数

动态计算子组件的高度

我正在开发一个Angular应用程序,我正面临一些问题.

我处于这样一种情况,我必须在父容器组件中加载多个子组件.子组件一个接一个地加载.我想加载'n'个组件,直到滚动可见,这样我就可以处理子组件的延迟加载.截至目前,我正在尝试使用以下条件.

while (window.screen.height > 
   this.elementRef.nativeElement.getBoundingClientRect().height) 
   {
      this.child= this.childSet.slice(0, this.count+1);
   }
Run Code Online (Sandbox Code Playgroud)

和html代码如下

<child*ngFor="let child of childSet" [value]="child " [column-size]="child .size ? child .size : 12"></child>
Run Code Online (Sandbox Code Playgroud)

但它在无限循环中进行,我不知道为什么,但我猜视图的渲染速度不如while循环.那么如何解决这个问题.请帮忙.

angular2-template angular

12
推荐指数
1
解决办法
1409
查看次数

Angular 可以使用捕获而不是冒泡来捕获事件吗?

我以某种方式需要捕获方法来捕获触发的事件,但是模板中的 ($event) 默认是在冒泡方法中触发的。有什么地方可以改变吗?

angular

10
推荐指数
2
解决办法
6969
查看次数

index.html没有加载本地CSS

我最近开始使用AngularCLI.我已将所有文件从Angular2转移到AngularCLI项目.

但它没有加载一些本地的CSS文件,但它正在加载其他的CSS文件?

目前的目录是:

-src
--index
--styles.css
--app
---angular2-fullcalendar
----fullcalendar.min.css
Run Code Online (Sandbox Code Playgroud)

的index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Cudyangularcli</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" type="text/css" href="styles.css">
  <link rel="stylesheet" type="text/css" href="../src/app/angular2-fullcalendar/fullcalendar.min.css" >
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

错误是: 在此输入图像描述

angular-cli angular

10
推荐指数
2
解决办法
1万
查看次数

如何在angular 2 Typescript中为FormBuilder对象设置值

我使用了Reactive form Validation(模型驱动的验证),但是无法在Dropdown更改时将值设置为form对象

这是我的Formgroup

studentModel:StudenModel
AMform: FormGroup;
Name = new FormControl("", Validators.required);
Address = new FormControl("", Validators.maxLength(16));

constructor(fb: FormBuilder){     
  this.AMform = fb.group({
    "Name": this.Code,
    "Address": this.Abbrev,
  });
}
onAccntChange(event: Event) {
  // set the value from Class Model
  ////  this.studentModel 
  // how to set this.studentModel value to form
}    
Run Code Online (Sandbox Code Playgroud)

这是我的html页面

<form [formGroup]="AMform" (ngSubmit)="submit()">
    <select (change)="onAccntChange($event)" class="form-control" [disabled]="ddlActivity" formControlName="AccountManagerID">
        <option value="0">Select</option>
        <option *ngFor="let item of allStudent" value={{item.StudentID}}>
            {{item.Name}}
        </option>
    </select>

    <div class="col-sm-9">
        <input type="text" class="form-control" formControlName="Name">
    </div>
    <div [hidden]="Name.valid || Code.pristine" …
Run Code Online (Sandbox Code Playgroud)

html javascript typescript angular

9
推荐指数
3
解决办法
1万
查看次数