小编Bee*_*ice的帖子

将MathJax集成到SystemJS构建中

SystemJS用来构建一个Angular 2应用程序,我想开始MathJax在组件中使用.我安装了:

npm install --save-dev mathjax
npm install --save @types/mathjax
Run Code Online (Sandbox Code Playgroud)

MathJax现已安装在/node_modules/mathjax.当我的组件执行时import "mathjax",文件/node_modules/mathjax/MathJax.js已加载.到现在为止还挺好.

问题是该文件然后尝试使用相对于项目根目录而不是MathJax安装目录的路径加载其他文件.

例如,MathJax.js尝试加载

/extensions/MathMenu.js  404 Not found
/extensions/MathZoom.js  404 Not found 
Run Code Online (Sandbox Code Playgroud)

正确的路径是

/node_modules/mathjax/extensions/MathMenu.js
/node_modules/mathjax/extensions/MathZoom.js
Run Code Online (Sandbox Code Playgroud)

快速查看源文件内部显示URL是这样引用的:

[MathJax]/extensions/MathMenu.js
Run Code Online (Sandbox Code Playgroud)

知道我应该在哪里解决这个问题吗?我知道我不应该更改MathJax.js文件本身,因为更新后将覆盖任何更改.使用htaccess或其他服务器端重定向也没有意义.

我知道我可以使用CDN加载一个有效的MathJax包:

<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=AM_SVG"></script>
Run Code Online (Sandbox Code Playgroud)

但是我正在尝试学习如何将库集成到我的构建设置中.

build mathjax systemjs angular

3
推荐指数
1
解决办法
349
查看次数

CSS:允许 textarea 随着内容增长到一个限制

在某些站点(例如 Github)上,textareas 有一组min-heightmax-height. 当用户输入它们时,它们会随着内容增长,直到达到最大高度。然后出现垂直滚动条。

这个效果是怎么实现的?我的 textarea 没有随着它的内容增长,即使它没有达到指定的max-height

textarea{
  width:100%;
  min-height:80px;
  max-height:200px;
  overflow:auto;
}
Run Code Online (Sandbox Code Playgroud)

看看这个演示

css

3
推荐指数
2
解决办法
2914
查看次数

如何将gulp任务添加到角度cli构建中

我正在将Angular 4项目的部署工具切换为angular/cli.该命令默认ng build将生成的包放在一个dist文件夹中.

我需要弄清楚如何将自定义任务添加到此过程.具体来说,我需要将大量.svg文件捆绑并缩小为sprite.defs.svg文件,并将结果放入dist/assets/svg/.使用我以前的部署工具链,我使用gulpgulp-svg-sprite插件.这是我的捆绑步骤:

const svgSprite = require('gulp-svg-sprite');

gulp.src('**/*.svg')
  .pipe(svgSprite({
    mode: {
      defs: {
        dest:'.',
        sprite:"sprite.defs.svg"
      }
    }
  }))
  .pipe(gulp.dest('dist/assets/svg'));
Run Code Online (Sandbox Code Playgroud)

有没有一种简单的方法将这样的东西整合到angular/cli中ng build

deployment bundling-and-minification gulp angular-cli angular

3
推荐指数
1
解决办法
3429
查看次数

WebStorm PhpStorm代码重新格式化:如何修复注释?

WebStorm和PhpStorm允许您重新格式化代码以适应设置中设置的编码样式(例如:缩进空间)

我正在使用这个措施修复我的项目中的一些lint错误,但我一直困在一点:是否有可能重新格式化所有//注释以空格开头?来自

//My comment
Run Code Online (Sandbox Code Playgroud)

// My comment
Run Code Online (Sandbox Code Playgroud)

如果评论已经以空格字符开头,则应该单独留下.

编辑:有一个选项:

  • "设置>>编辑器>>代码样式>> {{coding lang}} >>其他选项卡"在每个注释的开头设置一个空格(参见本图底部的" 注释代码 "部分).

在此输入图像描述

但是,即使选择了该选项,使用"重新格式化代码"选项也无法修复注释.

phpstorm webstorm

3
推荐指数
1
解决办法
171
查看次数

systemjs-builder:Angular 2 Component Relative Paths导致404错误

这是https://github.com/systemjs/builder/issues/611的交叉帖子

我正在尝试使用systemjs-builder 0.15.16 buildStatic方法捆绑我的Angular 2 rc 1应用程序.角度组件具有视图以及脚本外部的一个或多个样式表.它们以两种方式之一@Component元数据中引用

使用绝对路径:

@Component({
  templateUrl: 'app/some.component.html',
  styleUrls:  ['app/some.component.css']
})
Run Code Online (Sandbox Code Playgroud)

使用现在推荐的相对路径:

@Component({
  moduleId: module.id,
  templateUrl: 'some.component.html',
  styleUrls:  ['some.component.css']
})
Run Code Online (Sandbox Code Playgroud)

我的应用程序使用相对路径,事情一直很好.今天我决定使用systemjs-builder's buildStatic.每当存在相对路径时,生成的文件都会抛出404错误,因为浏览器正在取localhost/some.component.html而不是localhost/app/some.component.html.下面是我的gulpfile.js的相关部分

var appDev = 'dev/';
var appProd = 'app/';
var typescript = require('gulp-typescript');
var tsProject = typescript.createProject('tsconfig.json');
var Builder = require('systemjs-builder');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('build-ts', function () {
    return gulp.src(appDev + '**/*.ts')
        .pipe(sourcemaps.init())
        .pipe(typescript(tsProject))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(appProd));
});
gulp.task('bundle',['build-ts'], function() {

    var …
Run Code Online (Sandbox Code Playgroud)

angularjs typescript systemjs angular

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

带有Angular 2的RxJS 5:重试失败,但可观察到,但随后出现转发错误

当HTTP请求失败时,我想间隔1秒重试两次。如果它第三次再次失败,我想将该错误转发给观察者。我在最后一部分遇到了麻烦。

来自DataService.get()的 HTTP请求

return this.http.get(url,options)
    .retryWhen(errors => errors.delay(1000).take(2))
    .catch((res)=>this.handleError(res));
Run Code Online (Sandbox Code Playgroud)

订阅

this.dataSvc.get('/path').subscribe(
    res => console.log(res),
    err => console.error(err),
    () => console.log('Complete')
);
Run Code Online (Sandbox Code Playgroud)

我的服务器设置为始终返回错误(状态400 Bad request)。

  • 我希望应用程序发出第二个请求,发出第三个请求,然后抛出要捕获的错误 this.handleError()

  • 实际发生的情况:应用程序发出第二个请求,发出第三次请求,然后Observable完成而没有错误(将“ Complete ”打印到控制台)

Angular 2 rc.6RxJS 5 beta 11Typescript 2.0.2

observable typescript rxjs5 angular

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

Angular 2 RxJS Observable:重试除了429状态

我已经编写了我的Observable(来自HTTP请求)来重试失败.但是,如果服务器响应错误,我想重试429 Too many requests.

无论如何,当前的实现重试两次,相隔1秒.

return this.http.get(url,options)
    .retryWhen(errors => {
        return errors.delay(1000).take(2);
    })
    .catch((res)=>this.handleError(res));
Run Code Online (Sandbox Code Playgroud)

errors是一个观察者.如何获取Response导致错误的基础对象?有了它,我可以访问服务器的状态代码,只有在它不是429时才重试:

return this.http.get(url,options)
    .retryWhen(errors => {
        if($code == 429) throw errors;
        else return errors.delay(1000).take(2);
    })
.catch((res)=>this.handleError(res));
Run Code Online (Sandbox Code Playgroud)

我怎样才能获得状态代码retryWhen

Plunker的现场演示

Angular 2 rc.6,RxJS 5 Beta 11,Typescript 2.0.2

observable typescript rxjs5 angular

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

PHPDoc和PhpStorm:表示魔术方法的返回类型

一般来说,这就是我如何让我的IDE(PhpStorm 2017)识别我无法正式声明的变量类型:

/*
 * @var User $user
*/
foreach($users as $user){}
Run Code Online (Sandbox Code Playgroud)

IDE知道那$user是类User.现在我正面临着这条线的情况:

Yii::app()->user->login()
Run Code Online (Sandbox Code Playgroud)

具体来说,IDE不知道是什么类型user.我收到警告:

通过魔法方法访问的字段

所以我试着指定:

/**
 * @var User Yii::app()->user
 */
Yii::app()->user->login();
Run Code Online (Sandbox Code Playgroud)

但这并没有什么不同.如何帮助IDE解析类型?

php phpdoc phpstorm

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

为什么TypeScript抱怨数组长度?

我有一个接受2到4个参数的方法:

myMethod(a: string, b: string, c?: any, d?: number);
Run Code Online (Sandbox Code Playgroud)

在单元测试中,我尝试以这种方式将参数传递给方法:

const args: [string, string, any, number] = ['a', 'b', 'c', 0];
myMethod(...args);
Run Code Online (Sandbox Code Playgroud)

即使我声明args为设定长度,TypeScript编译器也会显示以下错误:

TS2556:预期2-4个参数,但得到0或更多.

为什么会显示此错误?有什么办法可以保留最后一行(函数调用)吗?

types typescript

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

PhpStorm/WebStorm 终端显示旧的 NPM 版本

我在Windows 10 x64跑步PhpStorm 2018.3。我已将 NodeJS 更新到 10.14.1,其中包括 NPM 6.4.1。

Windows 命令行工具显示正确的版本 在此处输入图片说明

PhpStorm 设置显示正确的版本 在此处输入图片说明

我遇到的问题是 PhpStorm 终端仍然显示 NPM 3.10.10,尽管它显示了正确的 Node 版本。

在此处输入图片说明

我试过了:

  • 重启 PhpStorm
  • 重新启动计算机
  • 卸载并重新安装 Node,然后重新启动计算机

这会导致麻烦,因为在我的 IDE 终端中运行的 NPM 版本无法看到全局安装的包。

来自 Windows 命令行的全局包

在此处输入图片说明

来自 PhpStorm 终端的全局包

在此处输入图片说明

我如何深入了解这一点?

更新

where npm从 PhpStorm 终端运行显示本地依赖已安装较旧的 NPM 版本

在此处输入图片说明

在此处输入图片说明

是否希望本地安装的 NPM 使终端无法看到我的全局包?

更新 2

当我从项目文件夹中运行 Windows 命令行工具时,一切都按预期工作,这与 PhpStorm 终端不同。看到正确版本,看到全局包,where命令看不到node_modules中安装的本地npm

在此处输入图片说明

解析度

感谢莉娜的解决方案。事实证明,使用PhpStorm 2018.3新的默认启用设置会将项目本地中的二进制文件添加./node_modules/.bin$PATH,因此终端将看到本地安装的 NPM 版本而不是全局版本。为了解决这个问题,我去Settings > …

node.js phpstorm webstorm

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

CSS如何居中::伪元素之后

我无法集中::afterCSS伪元素.主要元素是图像:

  • 图像应位于页面的中心
  • ::after显示图像标题的伪元素应该叠加在图像的中心.

这是我有的:

#frame {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: black;
  &: after {
    content: 'Caption overlay';
    color: white;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
Run Code Online (Sandbox Code Playgroud)
<div id="frame">
  <svg width="200" height="200">...</svg>
</div>
Run Code Online (Sandbox Code Playgroud)

图像框在页面上正确居中,但其标题不在图像上居中.相反,它位于右下角.

Codepen

html css

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

使Angular 2组件下载并运行脚本

我正在尝试使用MathJax在我的Angular 2应用程序中显示方程式.我的应用程序中只有一小部分实际需要此功能,因此我不希望所有用户都必须下载所需的3-400kb.

我最初的想法是import "mathjax"在我的组件中,因此只有在创建组件时才会加载库.但是,我从我之前的问题中了解到MathJax与其他人不能很好地兼容,因为它使用自己的自定义模块加载器.

我当前的设置script从我的加载,index.html但这意味着当只有一小部分用户需要此组件时,每个人都会下载它

<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=AM_SVG"></script>
Run Code Online (Sandbox Code Playgroud)

是否有一种干净的方法Angular 2让我的组件在ngOnInit()钩子中下载脚本并在DOM中执行回调?诸如(伪代码)之类的东西:

ngOnInit(){
    //download script, add to DOM      
    fetch('https://...MathJax.js').then(addToDom).then(this.onMathJaxLoaded);
}
onMathJaxLoaded(){
  // Run math renderer
  MathJax.Hub.Queue("Typeset",...);
}
Run Code Online (Sandbox Code Playgroud)

javascript mathjax angular

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