Questions tagged «angular»

我想警告用户未保存的更改，然后再离开我的angular 2应用程序的特定页面。通常，我会使用window.onbeforeunload，但是不适用于单页应用程序。 我发现在角度1中，您可以进入$locationChangeStart事件confirm为用户抛出一个框，但是我没有看到任何显示如何使角度2正常工作的东西，或者该事件是否仍然存在。我也看到过为ag1提供功能的插件onbeforeunload，但同样，我还没有看到将其用于ag2的任何方式。 我希望其他人找到了解决该问题的方法；两种方法都可以很好地达到我的目的。

112 angular  angular2-routing 

使用（npm install -g angular-cli）全局安装了angular-cli，但是当我尝试使用ng new my-project它创建项目时，抛出错误： ng：找不到命令

112 angular  npm  angular-cli 

我在ng-for循环中有一组单电池组件。 我已经准备好一切，但似乎无法找出合适的方法 目前我有 setTimeout(() => { scrollToBottom(); }); 但这并非一直有效，因为图像会异步将视口向下推。 在Angular 2中滚动到聊天窗口底部的合适方法是什么？

111 scroll  typescript  angular 

我目前正在使用Angular2。通常，我们使用@Output() addTab = new EventEmitter<any>();然后addTab.emit()向父组件发出事件。 从父母到孩子，我们有什么方法可以做副手吗？

111 angular  typescript 

我们已经完成了一个angular2项目的设置，并在内部创建了一个模块（my-module），并在模块内部使用了以下cmd命令创建了一个组件（my-new-component）： ng new angular2test cd angular2test ng g module my-module ng generate component my-new-component 创建设置和所有组件后，我们ng test从angular2test文件夹中的cmd 运行了命令。 以下文件是我们的my-new-component.component.ts文件： import { Component, OnInit } from '@angular/core'; import { Router, Routes, RouterModule } from '@angular/router'; import { DummyService } from '../services/dummy.service'; @Component({ selector: 'app-my-new-component', templateUrl: './my-new-component.component.html', styleUrls: ['./my-new-component.component.css'] }) export class MyNewComponentComponent …

111 unit-testing  angular  karma-jasmine  angular2-routing  angular-cli 

两者之间有什么区别，每种情况都有哪些用例？ 该文档不是完全有帮助： forRoot创建一个包含所有指令，给定路由和路由器服务本身的模块。 forChild创建一个模块，其中包含所有指令和给定的路由，但不包括路由器服务。 我模糊的猜测是，一个用于“主”模块，另一个用于任何导入的模块（因为它们已经可以从主模块获得服务了），但是我真的没有想到用例。

111 angular  router 

我在查阅本文档时遇到了编译概念。可以使用JIT或AOT编译。但是，我发现它非常简短，需要详细了解以下几点， 这两种技术之间的差异 关于何时使用什么的建议

111 angular  compilation 

我正在TypeScript中编写Angular 2服务，该服务将使用localstorage。我想将对浏览器window对象的引用注入到我的服务中，因为我不想引用任何全局变量，例如Angular1.x $window。 我怎么做？

110 angular  typescript  dependency-injection 

我有返回一个observable的服务，该服务向我的服务器发出一个http请求并获取数据。我想使用这些数据，但最终总是得到undefined。有什么问题？ 服务内容： @Injectable() export class EventService { constructor(private http: Http) { } getEventList(): Observable<any>{ let headers = new Headers({ 'Content-Type': 'application/json' }); let options = new RequestOptions({ headers: headers }); return this.http.get("http://localhost:9999/events/get", options) .map((res)=> res.json()) .catch((err)=> err) } } 零件： @Component({...}) export class EventComponent { myEvents: any; constructor( private es: …

110 javascript  angular  asynchronous  typescript  observable 

ng serve每当对源文件进行任何更改时，我都需要运行。控制台中没有错误。 Angular CLI: 1.6.2 Node: 8.9.1 OS: linux ia32 Angular: 5.1.2 ... animations, common, compiler, compiler-cli, core, forms ... http, language-service, platform-browser ... platform-browser-dynamic, router @angular/cdk: 5.0.2-c3d7cd9 @angular/cli: 1.6.2 @angular/material: 5.0.3-e20d8f0 @angular-devkit/build-optimizer: 0.0.36 @angular-devkit/core: 0.0.22 @angular-devkit/schematics: 0.0.42 @ngtools/json-schema: 1.1.0 @ngtools/webpack: 1.9.2 @schematics/angular: 0.1.11 @schematics/schematics: 0.0.11 typescript: 2.4.2 webpack: 3.10.0

110 angular 

我在RC4上并且遇到错误由于我的模板，没有将“ exportAs”设置为“ ngForm”的指令： <div class="form-group"> <label for="actionType">Action Type</label> <select ngControl="actionType" ===> #actionType="ngForm" id="actionType" class="form-control" required> <option value=""></option> <option *ngFor="let actionType of actionTypes" value="{{ actionType.label }}"> {{ actionType.label }} </option> </select> </div> boot.ts： import {disableDeprecatedForms, provideForms} from '@angular/forms'; import {bootstrap} from '@angular/platform-browser-dynamic'; import {HTTP_PROVIDERS, Http} from '@angular/http'; import {provideRouter} from '@angular/router'; …

109 angular  typescript  angular2-forms 

我正在寻找一种将功能绑定到我的整个页面的方法（当用户按下一个键时，我希望它在我的component.ts中触发一个功能） 使用AngularJS很容易，ng-keypress但不能使用(keypress)="handleInput($event)"。 我在整个页面上使用div包装器进行了尝试，但似乎不起作用。它只有在焦点对准它时才起作用。 <div (keypress)="handleInput($event)" tabindex="1">

109 typescript  angular  keypress  key-bindings 

自从升级到最新的Angular 2候选版本以来，我的img标签： <img class='photo-img' [hidden]="!showPhoto1" src='{{theMediaItem.photoURL1}}'> 引发浏览器错误： 原始异常：错误：资源URL上下文中使用的不安全值 网址的值是： http://veeu-images.s3.amazonaws.com/media/userphotos/116_1464645173408_cdv_photo_007.jpg 编辑： 我已经尝试过在其他解决方案中提出的建议，即这个问题应该是重复的，但是我遇到了同样的错误。 我已将以下代码添加到控制器： import {DomSanitizationService} from '@angular/platform-browser'; @Component({ templateUrl: 'build/pages/veeu/veeu.html' }) export class VeeUPage { static get parameters() { return [[NavController], [App], [MenuController], [DomSanitizationService]]; } constructor(nav, app, menu, sanitizer) { this.app = app; this.nav = nav; this.menu = menu; this.sanitizer …

109 angular 

ng-2父子数据继承对我来说一直很困难。 似乎是一个很好的可行的可行解决方案，是将我的总数据过滤到仅由单个父ID引用的子数据组成的数组。换句话说：数据继承成为通过一个父代ID进行数据过滤。 在一个具体的示例中，它可能看起来像：过滤books数组以仅显示具有确定的book store_id。 import {Component, Input} from 'angular2/core'; export class Store { id: number; name: string; } export class Book { id: number; shop_id: number; title: string; } @Component({ selector: 'book', template:` <p>These books should have a label of the shop: {{shop.id}}:</p> <p *ngFor="#book of booksByShopID">{{book.title}}</p> ` ]) export …

109 arrays  filter  typescript  angular 

在我的Angular 2组件中，我有一个Observable数组 list$: Observable<any[]>; 在我的模板中 <div *ngIf="list$.length==0">No records found.</div> <div *ngIf="list$.length>0"> <ul> <li *ngFor="let item of list$ | async">item.name</li> </ul> </div> 但是list $ .length在Observable数组中不起作用。 更新： 似乎（list $ | async）?. length给了我们长度，但是下面的代码仍然不起作用： <div> Length: {{(list$ | async)?.length}} <div *ngIf="(list$ | async)?.length>0"> <ul> <li *ngFor="let item of (list$ | async)"> {{item.firstName}} </li> </ul> …

109 angular  observable  angular2-template  angular2-services