在我的Angular 2应用程序中,当我向下滚动页面并单击页面底部的链接时,它确实会更改路径并将我带到下一页但它不会滚动到页面顶部.结果,如果第一页很长而第二页的内容很少,则给人的印象是第二页缺少内容.由于只有当用户滚动到页面顶部时内容才可见.
我可以在组件的ngInit中将窗口滚动到页面顶部但是,有没有更好的解决方案可以自动处理我的应用程序中的所有路径？
typescript angular2-directives angular2-template angular2-routing 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>
但是对于Observable数组,列表$ .length不起作用.
更新:
似乎(列出$ | 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>
</div>
</div>
任何人都可以指导我如何检查Observable数组的长度.
我有一个组件从服务器获取项目列表,然后使用模板中的*ngFor显示该列表.
我希望列表显示一些动画,但一个接一个.我的意思是每个列表项应该在其他之后动画.
我正在尝试这样的事情:
import { Component, Input, trigger, state, animate, transition, style } from '@angular/core';
@Component({
selector: 'list-item',
template: ` <li @flyInOut="'in'">{{item}}</li>`,
animations: [
trigger('flyInOut', [
state('in', style({ transform: 'translateX(0)' })),
transition('void => *', [
style({ transform: 'translateX(-100%)' }),
animate(100)
]),
transition('* => void', [
animate(100, style({ transform: 'translateX(100%)' }))
])
])
]
})
export class ListItemComponent {
@Input() item: any;
}
在我的列表组件模板中我使用它像:
<ul>
<li *ngFor="let item of list;">
<list-item [item]="item"></list-item>
</li>
</ul>
它的作用是立即显示整个列表.我希望项目一个接一个地输入一些动画.
我需要在Angular2应用程序中使用FileSaver.js(https://github.com/eligrey/FileSaver.js/).
我知道我可以在主html页面中将其添加为脚本文件,它将起作用.但是我想知道在Angular 2(TypeScript)应用程序中最好的方法是什么,这样我就可以调用window.saveAs来保存文件.
我需要在Angular2中构建一个readmore指令.该指令将用于折叠并使用"Read more"和"Close"链接扩展长文本块.不是基于字符数,而是基于指定的最大高度.
<div read-more [maxHeight]="250px" [innerHTML]="item.details">
</div>
任何人都可以指导什么是最可靠的方法来获得/设置这种特定情况下的元素的高度.
关于如何实施这一具体指令的任何指导方针也将受到高度赞赏.
我需要构建类似这样的https://github.com/jedfoster/Readmore.js
解:
在Andzhik的帮助下,我能够构建满足我要求的以下组件.
import { Component, Input, ElementRef, AfterViewInit } from '@angular/core';
@Component({
selector: 'read-more',
template: `
<div [innerHTML]="text" [class.collapsed]="isCollapsed" [style.height]="isCollapsed ? maxHeight+'px' : 'auto'">
</div>
<a *ngIf="isCollapsable" (click)="isCollapsed =! isCollapsed">Read {{isCollapsed? 'more':'less'}}</a>
`,
styles: [`
div.collapsed {
overflow: hidden;
}
`]
})
export class ReadMoreComponent implements AfterViewInit {
//the text that need to be put in the container
@Input() text: string;
//maximum height of the container
@Input() maxHeight: number …有人用ASP.Net MVC尝试过Angular 2 RC Final吗？
我在使用ASP.Net MVC配置Angular 2 RC 6时遇到了麻烦,直到beta 17一切正常.
具有以下配置的package.json似乎不起作用:
"dependencies": {
"@angular/common": "2.0.0-rc.6",
"@angular/compiler": "2.0.0-rc.6",
"@angular/core": "2.0.0-rc.6",
"@angular/forms": "0.3.0",
"@angular/http": "2.0.0-rc.6",
"@angular/platform-browser": "2.0.0-rc.6",
"@angular/platform-browser-dynamic": "2.0.0-rc.6",
"@angular/router": "3.0.0-rc.1",
"systemjs": "0.19.27",
"core-js": "^2.4.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12",
},
恢复包在输出窗口中显示以下输出:
====Executing command 'npm install'====
npm WARN package.json @ No description
npm WARN package.json @ No repository field.
npm WARN package.json @ No README data
npm http GET http://registry.npmjs.org/systemjs
npm http GET http://registry.npmjs.org/angular/compiler
npm http GET http://registry.npmjs.org/angular/core
npm http …在我的应用程序中,我想在组件加载时自动将焦点放在表单的第一个字段上.任何人都可以指导如何实现这一点,而不是重复,因为我想在我的应用程序中的每个表单(活动表单)上.
angular2-forms angular2-directives angular2-template angular
我最近构建了以下Angular 2 Read More组件.该组件所做的是使用"Read more"和"Read less"链接折叠和扩展长文本块.不是基于字符数,而是基于指定的最大高度.
import { Component, Input, ElementRef, AfterViewInit } from '@angular/core';
@Component({
selector: 'read-more',
template: `
<div [innerHTML]="text" [class.collapsed]="isCollapsed" [style.height]="isCollapsed ? maxHeight+'px' : 'auto'">
</div>
<a *ngIf="isCollapsable" (click)="isCollapsed =! isCollapsed">Read {{isCollapsed? 'more':'less'}}</a>
`,
styles: [`
div.collapsed {
overflow: hidden;
}
`]
})
export class ReadMoreComponent implements AfterViewInit {
//the text that need to be put in the container
@Input() text: string;
//maximum height of the container
@Input() maxHeight: number = 100;
//set these to false to …在Angular 2 RC 4中,我有一个类HttpLoading,它扩展了Angular 2的原始Http服务.
使用RC 4,我可以使用以下代码在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' …我按照https://web.dev/web-otp/上的说明在我的 Angular 应用程序中实现 Web OTP API。但是当添加下面的代码时，它会抛出错误：
const content = await window.navigator['credentials'].get({
otp: { transport: ['sms'] },
signal: abortController.signal
});
这是错误消息：
Error TS2769 (TS) No overload matches this call.
Overload 1 of 2, '(options?: CredentialRequestOptions): Promise<CredentialType>', gave the following error.
Argument of type '{ otp: { transport: string[]; }; signal: AbortSignal; }' is not assignable to parameter of type 'CredentialRequestOptions'.
Object literal may only specify known properties, and 'otp' does not exist in type 'CredentialRequestOptions'.
Overload 2 of 2, …