我的角度站点效果很好，但是当您click进入项目时，它会立即加载页面，有时还会有一段flash时间从API中提取图像，id例如1第二次延迟或页面过渡效果。
但是我不确定如何在Angular 2中实现这一点。有兴趣听听别人在做什么吗？
提前致谢
angular2-directives angular2-template angular2-routing angular2-services angular
任何人都可以指导如何在Angular 2 RC2中使用移动手势.
可能是这样的:
<div (swipeLeft)="OnSwipeLeft()"></div>
从API可以看出
HAMMER_GESTURE_CONFIG
HammerGestureConfig
下
@angular/platform-browser
但不知道如何使用它.
在一些帖子中我看到一些用户建议包括Hammer.js.但我相信如果它已经在api我们应该能够以一种简单的方式包含和使用它.
hammer.js angular2-directives angular2-template angular2-services angular
我不理解angular2网站的这一段:
我们在最后输入了一个诊断属性,以返回我们模型的JSON表示.它将帮助我们了解我们在开发过程中所做的工作; 我们给自己留了一张清理笔记,以便以后丢弃.
这是什么意思
angular2-forms angular2-directives angular2-services angular
我正在编写一个plnkr来测试一些路由问题突然出现这个错误消息,无论我在代码中改变了什么都不会消失:
EXCEPTION:错误:未捕获(在承诺中):无法解析EmployeeListComponent的所有参数:(？).
这是代码的相关部分:
export class EmployeeListComponent {
employees: Employee[];
constructor(private _employeeService: EmployeeService) {
_employeeService.getAll().subscribe(employees =>
this.employees = employees);
}
}
所以似乎Angular无法解决EmployeeService,对吧？我在上面的片段中对此进行了评论,当然,没有错误.
难道我忘了办理注册手续,它main.ts还是app.component.ts？不,
import {
Component
} from '@angular/core';
import {
ROUTER_DIRECTIVES
} from '@angular/router';
import {
EmployeeService
} from './employee.service';
@Component({
selector: 'plk-app',
template: '<router-outlet></router-outlet>',
directives: [
ROUTER_DIRECTIVES
],
providers: [
EmployeeService
]
})
export class AppComponent {
}
我应该注册main.ts吗？好吧,当我第一次出现这个错误时,我就把它移到app.component.ts了检查是否会解决它,但事实并非如此.
目前我无法看到森林中的树木,而Angular的错误消息并没有真正帮助(它们从来没有).这里有人能发现这个问题吗？plnkr可以在这里找到.
在Angular 2 RC 4中,我有一个类HttpLoading,它扩展了Angular2的原始Http
我可以使用以下代码在bootstrap中使用它而没有任何问题:
bootstrap(AppComponent, [
HTTP_PROVIDERS,
provide(RequestOptions, { useClass: DefaultRequestOptions }),
provide(Http, {
useFactory: (backend: XHRBackend, defaultOptions: RequestOptions) => new HttpLoading(backend, defaultOptions),
deps: [XHRBackend, RequestOptions]
})
]).catch(err => console.error(err));
我的DefaultRequest选项类
import { Injectable } from '@angular/core';
import { Headers, BaseRequestOptions } from '@angular/http';
@Injectable()
export class DefaultRequestOptions extends BaseRequestOptions {
headers: Headers = new Headers({
'Content-Type': 'application/json'
});
}
我的HttpLoading类看起来像这样:
import { Http, RequestOptionsArgs, ConnectionBackend, RequestOptions, Response } from '@angular/http'
import { Injectable } from '@angular/core'
import {GlobalService} …我在angular 2应用程序中有两个组件:组件A(父组件)和组件B(子组件).
当我使用@Input()将数据(myData)从A传递到B时,我在我的B(子组件)中获取我的数据,但问题是子组件在myData之前加载并且我得到了undefined,这是一个可以控制台的唯一方法.log(myData)是在ngOnDestroy钩子里!
如何处理这种负载顺序？
我正在调用REST端点.我想添加一个资源(下面).但是,当我的服务调用Http的post方法时,它将调用请求,但不返回响应的标头.至少,我遇到了Response实例的空头对象.(??)我确实希望响应头.特别是我希望Location标头作为"REST ADD RESOURCE"模式的一部分.Location标头包含新创建的资源的URL.
关于这一点的奇怪之处在于:当我直接调用我的API(因此不是通过Angular2)时,我得到了确切的响应,但这次是(所有)预期的头文件,包括Location响应头.
呃,Http.post有什么问题或者我做错了吗？
请注意:我的服务在此示例中返回Observable Response.这不是返回给调用者的预期类类型.我正在使用它是为了方便了解帖子响应发生了什么.实际上,我打算传递存储在Location标头中的url.
addModel(model: any): Observable<Response> {
let token = this.loginService.auth.accessToken;
let headers = new Headers({
'Content-Type': 'application/json',
'Accept': 'application/json',
'Authorization': `Bearer ${token}`
});
let options = new RequestOptions({headers: headers});
let data: string = JSON.stringify(model);
return this.http.post(this.url, data, options)
// .map(r => {
// console.log("Response ", r);
// return r.headers.get("Location"); // THERE IS NOTHING IN headers (?). Don't understand.
// })
.catch(err => Observable.throw(err));
}
流:
所以,我创建了一个管道:
import {Pipe, PipeTransform} from '@angular/core';
@Pipe({
name: 'transformNull'
})
export class TransformNull implements PipeTransform {
transform(value) {
if (value == null) {
return null;
}
}
然后,在HTML中我试图分解ngModel:
[ngModel]="user.extraInfo | transformNull" (ngModelChange)="user.extraInfo.value=$event"
这导致了这个错误:
Cannot set property 'value' of undefined TypeError: Cannot set property 'value' of undefined
我试图用*ngIf ="isDataAvailable"延迟页面加载,错误消失,用户可以保存表单,值存储到mongo 但是当他刷新页面时,输入框为空.
然后我删除了*ngIf,添加了elvis运算符,但值错误又回来了.
我正在使用zone.js v0.7.4,试用0.7.2和0.7.5但没有运气.
我在这里错过了什么？
我想有一个服务,它有一个可观察的变量依赖于当前URL.
:programID -- program overivew
:programID/bug -- bug list
:programID/bug/:bugID -- bug overview
哪里programID可以随时切换.我已经提供了一项服务,根据我从棱角分明的文档中的理解,我应该使用参数进行观察
ProgramService :(摘录)
currentProgramID: number
constructor(
private router: Router,
private route: ActivatedRoute,
private http: Http){
this.route.params.subscribe((params: Params) => {
console.log('Parent:', params['programID'])
})
this.route.children[0].params.subscribe((params: Params) => {
console.log('Childern:', params['programID'])
// Works if loaded while at url : 'abc123/bug/abc123'
})
this.route.params.subscribe((params: Params) => {
console.log('Hacky?:', this.route.snapshot.params['programID'])
})
}
需要当前程序参考的组件:(提取)
program: Promise<program>
constructor(
private programService: ProgramService, ... ){}
ngOnInit() {
this.program = this.programService.getProgram(/*current program*/)
...
} …当尝试使用ng build -prod构建时,我收到以下错误
ERROR in Cannot determine the module for class ManagersService in C:/Test/src/app/shared/common/managers/managers.service.ts! Add ManagersService to the NgModule to fix it.
我有AppModule,AppCommonModule和CustomModuleA.ManagersService位于AppCommonModule中.CustomModuleA有一个使用AppCommonModule的ManagersComponent(此组件使用ManagersService)的路由.AppCommonModule是在AppModule和CustomModuleA中导入的
我已将该服务添加到AppCommonModule提供程序.我不明白我在这里缺少什么.
注意:使用ng服务时,这就像魅力一样.没错.
这是属于AppCommonModule的ManagersComponent
@Component({
templateUrl: './managers.component.html',
providers: [ManagersService]
})
export class ManagersComponent extends AppComponentBase {
@ViewChild('createOrEditManagerModal') createOrEditManagerModal: CreateOrEditManagerModalComponent;
constructor(public managersService: ManagersService) {
}
这是AppCommonModule
@NgModule({
imports: [
FormsModule,
ReactiveFormsModule
],
declarations: [
ManagersComponent
],
providers: [
ManagersService,
],
exports: [
ManagersComponent,
]
})
这是CustomModuleA
@NgModule({
imports: [
CommonModule,
FormsModule,
HttpModule,
ModalModule,
TabsModule,
TooltipModule,
AppCommonModule,
],
declarations: [ …