Questions tagged «angular»

如何将多个独立的HTTP拦截器添加到Angular 4应用程序？ 我试图通过providers使用多个拦截器扩展数组来添加它们。但是只有最后一个被实际执行，才被Interceptor1忽略。 @NgModule({ declarations: [ /* ... */ ], imports: [ /* ... */ HttpModule ], providers: [ { provide: Http, useFactory: (xhrBackend: XHRBackend, requestOptions: RequestOptions) => new Interceptor1(xhrBackend, requestOptions), deps: [XHRBackend, RequestOptions], }, { provide: Http, useFactory: (xhrBackend: XHRBackend, requestOptions: RequestOptions) => new Interceptor2(xhrBackend, requestOptions), deps: [XHRBackend, RequestOptions] …

85 angular  http  interceptor  angular-http-interceptors 

我想将字符串值传递给angular2中的组件，但是它不适用于默认绑定。我在想类似的东西： <component [inputField]="string"></component> 不幸的是，赋值的右侧仅允许使用表达式。有没有办法做到这一点？

85 angular  angular2-template 

在Angular 1.xx中，您仅要求提供相同的服务，并且最终获得相同的实例，从而可以共享服务中的数据。 现在在Angular 2中，我有一个引用了我的服务的组件。我可以读取和修改服务中的数据，这很好。当我尝试在另一个组件中注入相同的服务时，好像获得了一个新实例。 我究竟做错了什么？模式本身是错误的（使用服务共享数据）还是我需要将服务标记为单例（在应用的一个实例内）或其他？ 我在2.0.0-alpha.27/ 顺便说一句 我通过注解中的appInjector（edit：now providers）注入服务@Component，然后在构造函数中保存引用。它在组件中本地工作-只是没有跨组件（它们不共享相同的服务实例），就像我认为的那样。 更新：从Angular 2.0.0开始，我们现在有了@ngModule，您可以在上的providers属性下定义said上的服务@ngModule。这将确保将该服务的相同实例传递到该模块中的每个组件，服务等。 https://angular.io/docs/ts/latest/guide/ngmodule.html#providers 更新：Angular和FE开发总体上发生了很多事情。如@noririco所述，您还可以使用像NgRx这样的状态管理系统：https ://ngrx.io/

84 angular  typescript 

我有一个基于Angular2 Seed项目的小型Angular2项目，我正尝试将其升级到Angular2 RC5。 我的项目具有一些功能，其中一个称为home。Home组件使用名为的子组件create-report-card-form。我已经在中声明了home和create-report-card-form组件home.module（请参见下面的代码），并得到此错误： 未处理的承诺拒绝：模板解析错误：由于它不是'create-report-card-form'的已知属性，因此无法绑定到'currentReportCardCount'。 如果“ create-report-card-form”是Angular组件，并且具有“ currentReportCardCount”输入，则请验证它是否属于此模块。 项目结构 -app - app.module.ts - app.component.ts - +home - home.module.ts - home.component.ts - home.component.html - create-report-card-form.component.ts - create-report-card-form.component.html - +<other "features"> - shared - shared.module.ts home.module import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import {ReactiveFormsModule} from '@angular/forms'; …

84 angular  typescript 

路线 const appRoutes: Routes = [ { path: '', redirectTo: '/companies/unionbank', pathMatch: 'full'}, { path: 'companies/:bank', component: BanksComponent }, { path: '**', redirectTo: '/companies/unionbank' } ] 零件 const NAVBAR = [ { name: 'Banks', submenu: [ { routelink: '/companies/unionbank', name: 'Union Bank' }, { routelink: '/companies/metrobank', name: 'Metro Bank' }, …

84 angular  angular2-routing 

如何使用base64在angular 2中编码或解码字符串？ 我的前端工具是Angular2。我有一个密码字符串，在将其传递给API之前，我需要进行base64编码。由于在服务中base64编码的字符串将被解码。 所以我正在寻找一些用于Angular2 / Typescript的base64编码/解码库和一些选项。 谢谢！！！

84 angular  typescript  npm-install 

我们有一个具有动态构建表单的组件。用验证器添加控件的代码可能如下所示： var c = new FormControl('', Validators.required); 但是，假设我要稍后添加2nd Validator 。我们怎样才能做到这一点？我们在线上找不到任何文档。我确实发现，尽管在表单控件中有setValidators this.form.controls["firstName"].setValidators 但目前尚不清楚如何添加新的或自定义验证器。

84 angular  forms  angular-reactive-forms 

嗨，我正在尝试弄清楚如何实现新的角度拦截器并401 unauthorized通过刷新令牌并重试请求来处理错误。这是我一直遵循的指南：https : //ryanchenkie.com/angular-authentication-using-the-http-client-and-http-interceptors 我已经成功地缓存了失败的请求，并且可以刷新令牌，但是我不知道如何重新发送以前失败的请求。我也想使它与我当前使用的解析器一起使用。 令牌拦截器 return next.handle( request ).do(( event: HttpEvent<any> ) => { if ( event instanceof HttpResponse ) { // do stuff with response if you want } }, ( err: any ) => { if ( err instanceof HttpErrorResponse ) { if ( err.status === 401 …

84 javascript  angular  rxjs 

只想了解Angular如何在后台构建和运行？ 以下是我到目前为止所了解的。想知道我是否错过了什么。 Angular如何构建 使用TypeScript对Angular应用程序进行编码后，我们使用Angular CLI命令来构建应用程序。 ng build命令将应用程序编译到输出目录中，并且构建工件将存储在该dist/目录中。 内部流程 1. Angular CLI运行Webpack来构建和捆绑所有JavaScript和CSS代码。 2. 反过来，Webpack调用TypeScript加载程序，该加载程序会提取.tsAngular项目中的所有文件，然后将它们转换为JavaScript，即转换为.js浏览器可以理解的文件。 这篇文章说Angular有两个编译器： 查看编译器 模块编译器 有关构建的问题 调用构建过程的顺序是什么？ Angular CLI首先调用以TypeScript =>编写的Angular内置编译器，然后调用TypeScript Transpiler =>，然后调用Webpack进行捆绑并存储在dist/目录中。 Angular如何运行 构建完成后，我们所有应用程序的组件，服务，模块等都将转换为JavaScript .js文件，该文件用于在浏览器中运行Angular应用程序。 Angular Docs中的语句 当您使用AppComponent类进行引导时（在main.ts中），Angular<app-root>在中index.html查找，找到它，实例化AppComponent实例，并将其呈现在<app-root>标记中。 当用户在应用程序中移动时，Angular会创建，更新和销毁组件。 跑步问题 尽管main.ts在上面的语句中使用它来解释引导过程，但是Angular应用程序不是使用JavaScript.js文件引导或启动的吗？ 难道上述所有语句不是使用JavaScript.js文件在运行时完成的吗？ 有谁知道所有零件在深度上如何装配在一起？

84 angular  typescript  build  angular-cli 

我正在做一个Angular项目。我正在为组件中的刷新动作而苦苦挣扎。 我想在单击按钮时刷新路由器的组件。当我单击它时，我有刷新按钮，组件/路由器需要刷新。 我尝试过window.location.reload()，location.reload()这两个都不适合我的需要。如果有人知道，请帮助。

84 angular  routes  components  refresh 

当前命令： ng serve --host --public $IP:$PORT 我的网站上的结果： 无效的主机头

84 angular  angular-cli  c9.io 

我有一个应用程序，其中有一个上传组件，可以在其中上传文件。它嵌入在中body.component。 上传时，它应使用BodyComponent.thefunction()父组件的函数（例如）（进行调用以更新数据）：但仅当父组件特别是时body.component。上载也可能以其他方式用于其他行为。 诸如此类parent(this).thefunction()，该怎么做？

83 angular 

我已经在标题中添加了CORS，但是我的请求中仍然出现CORS问题。在标头中添加和处理CORS和其他请求的正确方法是什么？ 这是服务文件代码： import { HttpClient, HttpHeaders, HttpClientModule } from '@angular/common/http'; const httpOptions = { headers: new HttpHeaders({ 'Access-Control-Allow-Origin':'*', 'Authorization':'authkey', 'userid':'1' }) }; public baseurl = 'http://localhost/XXXXXX'; userAPI(data): Observable<any> { return this.http.post(this.baseurl, data, httpOptions) .pipe( tap((result) => console.log('result-->',result)), catchError(this.handleError('error', [])) ); } 错误： 对预检请求的响应未通过访问控制检查：所请求的资源上不存在“ Access-Control-Allow-Origin”标头。因此，不允许访问源' http：// localhost：4200 ' 失败：针对（未知网址）的Http错误响应：0未知错误 在服务器端代码中，我已在索引文件中添加了CORS。 header('Access-Control-Allow-Origin: …

83 angular  angular5 

我在我们的应用程序中使用Angular-CLI 1.6.6和。除了在我们的生产环境中弹出一条错误消息外，一切都可以在本地lite服务器和生产服务器上正常运行：@angular/service-worker 5.2.5Angular 5.2.5 加载资源失败：服务器响应状态为504（网关超时） 查看ngsw-worker.js脚本，我发现生成上面错误消息的行（以下是2466）： async safeFetch(req) { try { return await this.scope.fetch(req); } catch (err) { this.debugger.log(err, `Driver.fetch(${req.url})`); return this.adapter.newResponse(null, { status: 504, statusText: 'Gateway Timeout', }); } } 捕获中的控制台日志错误er发出以下错误： TypeError: Failed to execute 'fetch' on 'ServiceWorkerGlobalScope': 'only-if-cached' can be set only with 'same-origin' mode at Driver.safeFetch (ngsw-worker.js:2464) …

83 angular  angular-cli  angular5  service-worker  angular-service-worker 

我正在使用angular.io网站上的5分钟快速入门，该网站包含这样的文件结构： angular2-quickstart app app.component.ts boot.ts index.html license.md package.json tsconfig.json tsconfig.json是这样的代码块： { "compilerOptions": { "target": "ES5", "module": "system", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": false }, "exclude": [ "node_modules" ] } 还有package.json： { "name": "angular2-quickstart", "version": "1.0.0", "scripts": { "tsc": "tsc", "tsc:w": "tsc -w", "lite": "lite-server", …

82 javascript  json  angular