小编Dav*_*avy的帖子

将lodash导入angular2 + typescript应用程序

我很难尝试导入lodash模块.我使用npm + gulp设置我的项目,并继续击中同一面墙.我尝试过常规的lodash,还有lodash-es.

lodash npm包:(包根文件夹中有一个index.js文件)

import * as _ from 'lodash';    
Run Code Online (Sandbox Code Playgroud)

结果是:

error TS2307: Cannot find module 'lodash'.
Run Code Online (Sandbox Code Playgroud)

lodash-es npm包:(在lodash.js中有一个defaut导出我的包根文件夹)

import * as _ from 'lodash-es/lodash';
Run Code Online (Sandbox Code Playgroud)

结果是:

error TS2307: Cannot find module 'lodash-es'.   
Run Code Online (Sandbox Code Playgroud)

gulp任务和webstorm都报告了同样的问题.

有趣的是,这不会返回错误:

import 'lodash-es/lodash';
Run Code Online (Sandbox Code Playgroud)

......但当然没有"_"......

我的tsconfig.json文件:

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules"
  ]
}
Run Code Online (Sandbox Code Playgroud)

我的gulpfile.js:

var gulp = require('gulp'),
    ts = require('gulp-typescript'),
    uglify = require('gulp-uglify'),
    sourcemaps = require('gulp-sourcemaps'),
    tsPath = …
Run Code Online (Sandbox Code Playgroud)

javascript typescript lodash es6-module-loader angular

246
推荐指数
8
解决办法
16万
查看次数

使用rxjs处理刷新令牌

由于我已经开始使用angular2,我已经设置了我的服务来返回T的Observable.在服务中我会有map()调用,使用这些服务的组件只会使用subscribe()来等待响应.对于这些简单的场景我真的不需要深入研究rxjs所以一切都还可以.

我现在想要实现以下目标:我正在使用Oauth2身份验证和刷新令牌.我想构建一个所有其他服务都将使用的api服务,并在返回401错误时透明地处理刷新令牌.因此,在401的情况下,我首先从OAuth2端点获取新令牌,然后使用新令牌重试我的请求.下面的代码工作正常,承诺:

request(url: string, request: RequestOptionsArgs): Promise<Response> {
    var me = this;

    request.headers = request.headers || new Headers();
    var isSecureCall: boolean =  true; //url.toLowerCase().startsWith('https://');
    if (isSecureCall === true) {
        me.authService.setAuthorizationHeader(request.headers);
    }
    request.headers.append('Content-Type', 'application/json');
    request.headers.append('Accept', 'application/json');

    return this.http.request(url, request).toPromise()
        .catch(initialError => {
            if (initialError && initialError.status === 401 && isSecureCall === true) {
                // token might be expired, try to refresh token. 
                return me.authService.refreshAuthentication().then((authenticationResult:AuthenticationResult) => {
                    if (authenticationResult.IsAuthenticated == true) {
                        // retry with new token
                        me.authService.setAuthorizationHeader(request.headers);
                        return this.http.request(url, request).toPromise();
                    } …
Run Code Online (Sandbox Code Playgroud)

rxjs angular

43
推荐指数
2
解决办法
2万
查看次数

做一个Promise.resolve的RxJS替代方案?

RxJS中的等价物是什么Promise.resolve?我知道我能做到,Observable.fromPromise(Promise.resolve(someValue));但必须有一个更清洁的方式.

rxjs angular

32
推荐指数
1
解决办法
1万
查看次数

角度1.3.0并输入[type = string]

我们最近更新了我们的应用程序以使用最新的角度版本,从版本到1.3.0到1.5.0之前.显然我们现在碰到1.3.0中引入的突破性变化:

https://github.com/angular/angular.js/issues/9218

我们有一个自定义指令,使我们能够使用pikaday日期选择器:

module.directive('pikaday', function () {
    return {
        require: 'ngModel',
        link: function preLink(scope, element, attrs, controller) {
            var $element = $(element),
                momentFormat = 'DD/MM/YYYY',
                year = new Date().getFullYear();

            // init datepicker
            var picker = new Pikaday(
                {
                    field: document.getElementById(attrs.id),
                    firstDay: 1,
                    format: momentFormat,
                    minDate: new Date((year - 1) + '-01-01'),
                    maxDate: new Date((year + 1) + '-12-31'),
                    yearRange: [year - 1, year + 1],
                    onSelect: function (date) {
                        controller.$setViewValue(date);
                    },
                    defaultDate: scope.$eval(attrs.ngModel), // require: 'ngModel'
                    setDefaultDate: true
                });

            // …
Run Code Online (Sandbox Code Playgroud)

angularjs angular-directive

9
推荐指数
1
解决办法
201
查看次数

Facebook 分享按钮问题:“找不到附件:找不到附件。”

我按照此页面上的说明进行操作:https : //developers.facebook.com/docs/plugins/share-button/#settings

我得到一个有效的共享对话框,但是当我尝试共享到“在私人消息中共享”时,我在共享对话框中收到以下错误:“找不到附件:找不到附件。”

我的应用程序是一个 angular 11 应用程序,我的 index.html 中有这个,就在 body 标签之后:

    <div id="fb-root"></div>
    <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
Run Code Online (Sandbox Code Playgroud)

按钮 html 如下所示:

<div *ngIf="fbShareRoute" class="fb-share-button" [attr.data-href]="fbShareRoute" data-layout="button" data-size="large"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.free-sudoku-puzzle.net%2F&amp;src=sdkpreparse" class="fb-xfbml-parse-ignore">Share</a></div>
Run Code Online (Sandbox Code Playgroud)

我最初的想法是 fb 脚本不能很好地与 angular 配合使用,因为我通过 [attr.data-href] 绑定了 url,但我认为情况并非如此:

  • 简单地共享到您的个人资料时,该对话框可以正常工作
  • 我尝试删除 [attr.data-href] 并仅使用硬编码的 data-href 属性,这没有区别。

有任何想法吗?

facebook facebook-social-plugins facebook-share angular

7
推荐指数
1
解决办法
1016
查看次数

HTML5拖放过程中没有关键事件

我有一个广泛使用Html5拖放的屏幕,除了拖动时的滚动行为外,它运行良好。当您拖动到窗口的边缘时,屏幕将滚动,但效果不佳。现在,用户不介意是否可以简单地使用向上/向下箭头或向上/向下页面滚动键,但这显然不起作用!使用旧式拖放技术(例如jquery.ui.draggable),就不会出现此问题,仅当使用draggable =“ true”方法时才存在。

我以为我可以捕捉到事件并提供msyelf这种行为。因此,我进行了一些测试,并将事件处理程序绑定到window.keydown和window.keyup并猜出了什么:我测试过的浏览器都没有在拖动时触发任何键事件。

$(window).keyup(function() {
    $('#log').append('<div>key up</div>');
});

$(window).keydown(function() {
    $('#log').append('<div>key down</div>');
});

$(window).keypress(function() {
    $('#log').append('<div>key press</div>');
});
Run Code Online (Sandbox Code Playgroud)

小提琴:按下一个键,然后开始拖动span元素,并在拖动时尝试再次按下一个键(您可能必须先单击“结果”窗格以使其具有焦点)

https://jsfiddle.net/Davy78/xkddhzts/2/

这很愚蠢,我无法向用户提供此简单功能请求。有人知道任何解决方法吗?

html5 draggable javascript-events

6
推荐指数
1
解决办法
1499
查看次数

ngx-bootstrap datepicker格式的全局配置

是否可以为ngx-bootstrap datepicker全局配置日期格式?

说明文档中提到的BsDatepickerConfig类,以及如何将它传递给每一个人日期选择器了,但是我有点惊讶,似乎有在全球范围内没有可能的配置(至少没有记录)

https://valor-software.com/ngx-bootstrap/#/datepicker#bs-datepicker-config

ngx-bootstrap

6
推荐指数
1
解决办法
4419
查看次数

防止多次执行 observable

我有一个屏幕需要显示来自 api 的一些不断变化的数据。在我的 api 调用的 observable 上,我使用 RepeatWhen() 来实现轮询。另外,当我检测到传入数据的某些值发生变化时,我需要执行额外的 api 调用。我当前的实现是这样的:

    let queueStatusObservable = this.enumService.getOptions('WorkQueueStatus');
    let queueItemObservable = this.enumService.getOptions('WorkItemStatus');

    // retrieve status every 3000ms
    let summaryObservable = this.service
        .getSummary(this.id)
        .repeatWhen(completed => completed.delay(3000));

    this.summaryModel$ = Observable.combineLatest(queueStatusObservable, queueItemObservable, summaryObservable)
        .map(results => {
            let workQueueStatusList = results[0];
            let workItemStatusList = results[1];
            let summary = results[2].status > -1 ? results[2] : null // convert empty {} object to null;

            let model = {
                workQueueStatusList: workQueueStatusList,
                workItemStatusList: workItemStatusList,
                summary: summary
            };

            return model;
        });

    // …
Run Code Online (Sandbox Code Playgroud)

rxjs angular

5
推荐指数
1
解决办法
1770
查看次数

在RC6中升级到@ angular/forms

我一直在推迟从已弃用的表单api到@ angular/forms中的新表单api的升级.我刚刚升级到RC6,现在也想开始使用@ angular/forms.

此时文档非常稀缺,而且我很快陷入困境.

这就是我的工作表格:

<form [ngFormModel]="registrationForm" (ngSubmit)="register(registrationForm.value)">
    <fieldset class="form-group">
        <label for="email">Email address</label>
        <input type="email" class="form-control" id="email" placeholder="email" [ngFormControl]="registrationForm.controls['email']" maxlength="128" required>
    </fieldset>
    <div class="alert alert-warning" role="alert" *ngIf="registrationResponse && registrationResponse.EmailExists">
      This email account is already linked to an account! <a [routerLink]="['/user/logon']">Go here to login</a>.
    </div>
    <fieldset class="form-group">
        <label for="username">User name</label>
        <input type="text" class="form-control" id="username" placeholder="user name" [ngFormControl]="registrationForm.controls['username']" maxlength="32" required>
    </fieldset>
    <div class="alert alert-warning" role="alert" *ngIf="registrationResponse && registrationResponse.UsernameExists">
      This username is already taken! Please choose another one.
    </div>
    <div>
        <button type="submit" class="btn …
Run Code Online (Sandbox Code Playgroud)

javascript forms angular2-forms angular

2
推荐指数
1
解决办法
2594
查看次数