Tag: angular

用angular2 http服务caching结果

我通过服务公开HTTP GET请求，并且有几个组件正在使用这些数据（用户的个人资料详细信息）。 我希望第一个组件请求实际执行HTTP GET请求到服务器并caching结果，以便随后的请求将使用caching的数据，而不是再次调用服务器。 下面是这个服务的一个例子，你会如何推荐用Angular2和typescript来实现这个caching层。 import {Inject, Injectable} from 'angular2/core'; import {Http, Headers} from "angular2/http"; import {JsonHeaders} from "./BaseHeaders"; import {ProfileDetails} from "../models/profileDetails"; @Injectable() export class ProfileService{ myProfileDetails: ProfileDetails = null; constructor(private http:Http) { } getUserProfile(userId:number) { return this.http.get('/users/' + userId + '/profile/', { headers: headers }) .map(response => { if(response.status==400) { return "FAILURE"; } […]

Angular 2/4在服务和组件中使用pipe道

在Angular 1中，我可以在服务和控制器中使用类似如下语法的filter（pipe道）： $filter('date')(myDate, 'yyyy-MM-dd'); 在Angular2 / 4中可以在服务/组件中使用pipe道吗？

angular2兄弟组件通信

我有一个ListComponent。 在ListComponent中单击某个项目时，该项目的详细信息应显示在DetailComponent中。 两者同时在屏幕上，所以不涉及路由。 如何告诉DetailComponent ListComponent中的哪个项目被点击？ 我已经考虑发布一个事件，直到父（AppComponent），并让父母用@Input在DetailComponent上设置selectedItem.id。 或者我可以使用可观察订阅的共享服务。 编辑：通过事件+ @Input设置选定的项目不会触发DetailComponent，但是，以防我需要执行额外的代码。 所以我不确定这是一个可接受的解决scheme。 但是这两种方法看起来都比Angular 1的做法要复杂得多，这个方法是通过$ rootScope。$ broadcast或$ scope。$ parent。$ broadcast来完成的。 Angular 2中的所有东西都是一个组件，我很惊讶没有关于组件通信的更多信息。 有没有另外一种更直接的方法来完成这个任务？

如何看Angular 2中的表单变化？

如何看Angular 2中的表单变化？ 在Angular 1.x中，我可能有一个如下所示的表单： <ng-form> <label>First Name</label> <input type="text" ng-model="model.first_name"> <label>Last Name</label> <input type="text" ng-model="model.last_name"> </ng-form> 在相应的控制器中，我可以很容易地观察到表单内容的变化，如下所示： function($scope) { $scope.model = {}; $scope.$watch('model', () => { // Model has updated }, true); } 这里是JSFiddle的一个例子 。 我很难找出如何在Angular 2中完成同样的事情。显然，我们不再有$scope等等，但是肯定有一种方法可以完成同样的事情呢？ 这是一个Plunker的2.X例子 。

如何使用SystemJS和Gulp来准备发布版本？

我在我的Angular2项目中使用SystemJS。 我使用TypeScript的tsconfig文件。 我想用gulp连接并缩小我的代码的生产版本。 我有一个问题，在代码拼接：每次我试图连接文件时，我得到“angular”未定义或“系统”未定义。 我试图修改我尝试从节点模块加载我的文件的顺序，但是我没有成功。 我想知道你们有没有这个问题，并find答案？ 这是我的大嘴文件： var gulp = require('gulp'), ….. var paths = { dist: 'dist', vendor: { js: [ 'node_modules/systemjs/dist/system.src.js', 'node_modules/angular2/bundles/angular2.dev.js', 'node_modules/angular2/bundles/angular2-polyfills.js', 'node_modules/angular2/bundles/router.dev.js' … ], css: [] }, app: { templates: [ 'app/**/*.html', '!node_modules/*.html' ], scripts: [ 'app/**/*.ts', 'app/config.ts', 'app/app.ts' ] } }; var tsProject = ts.createProject('tsconfig.json', { out: 'Whatever.js' }); gulp.task('dev:build:templates', […]

组件之间的angular度共享服务不起作用

我有一个服务，我宣布我的variables。 在我的组件中，我使用这个variables来把数据放入它。 服务： @Injectable() export class DataService { public msgs = []; constructor() { } } 现在我在我的组件中使用这个variables： export class MessagesComponent implements OnInit { constructor(private dataService: DataService){} ngOnInit() { this.getData(); } getData(){ let msgs = []; if (diffr <= this.geomessage[i].range) { this.geomessage[i].dist = diffr; msgs.push(this.geomessage[i]); //console.log("this message: ", this.geomessage[i]); //DEBUG } this.dataService.msgs = msgs; } } […]

元素不可见错误（无法点击元素）

我想点击一个单选button，出现在网页上。 代码如下： HTML代码： <div class="small-checkbox red-theme raleway-regular text-muted2 position-relative"> <div class="city-checkbox inline-block position-relative" ng-class="{'rounded-checkbox': main.current_city_id == 1, 'mb-20': main.ifDeviceIsPhone}"> <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect mh-20" for="mumbaiCity" ng-class="{'is-checked' : main.current_city_id == 1}"> <input type="radio" id="mumbaiCity" class="mdl-radio__button position-relative vertical-middle" name="city" value="1" ng-click="main.setCity('Mumbai', 1)"> <span class="mdl-radio__label position-relative font15"><img class="city-icon" src="../../../assets/img/cities/mumbai-icon.png">Mumbai</span> </label> </div> </div> Tesstcase： // demo-test.js describe('Protractor Demo App', […]

量angular器中的browser.ignoreSynchronization是什么？

我曾多次看到人们build议使用的地方： browser.ignoreSynchronization=true; // or false 但我不明白为什么我们需要它？

Angular 2 – innerHTML样式

我从HTTP调用中获取大量的HTML代码。 我把HTML块放在一个variables中，并使用[innerHTML]将其插入到我的页面中，但是我无法对插入的HTML块进行样式设置。 有没有人有任何build议，我可以做到这一点？ @Component({selector: 'calendar', template: '<div [innerHTML]="calendar"></div>', providers:[HomeService], styles: [` h3 {color:red;} `}) 我想要的样式的HTML是包含在variables“日历”中的块。

如何在Angular 2中设置DatePipe的区域设置？

我想显示date使用欧洲格式dd/mm/yyyy但使用DatePipe shortDate格式它只显示使用美国date样式mm/dd/yyyy 。 我假设默认语言环境是en_US。 也许我在文档中缺less，但我怎样才能更改在Angular2应用程序的默认区域设置？ 或者也许有一种方法将自定义格式传递给DatePipe？