小编Bla*_*axy的帖子

使用@babel/cli以下命令显示代码:

babel.config.js

生成一个文件,需要从我的计算机使用绝对路径导入.当然,在服务器上运行它会因为找不到路径而中断.

以下是绝对导入的示例:

babel --plugins @babel/plugin-transform-arrow-functions www/js/origin.js --out-file www/js/result.js

有没有办法让转换后的文件包含内联所需的一切？

我目前不使用任何特定babelrc或@babel/cli文件.

我的问题很简单,但我没有找到一个正确的方法(我的意思是不使用相对位置容器内的子元素的绝对位置)来实现Bootstrap 4中的这个.

我有一排col-8和col-4.我在col-4中的内容必须正确对齐,因此其内容位于右边界.

<h1 class="col-md-8">Applications portfolio</h1>

  <div class="btn-group col-md-4" role="group">
    <p class="float-right">
      <a class="btn btn-secondary btn-md" href="#">
        <i class="fa fa-plus" aria-hidden="true"></i> Creation</a>
      <a class="btn btn-md btn-secondary" href="#">
        <i class="fa fa-flag" aria-hidden="true"></i> Report</a>
    </p>
  </div>

这是一个codepen:

https://codepen.io/anon/pen/QpzVgJ

我希望我的两个按钮在col-4中正确对齐.

如何在Bootstrap 4中正确对齐col中的正确元素？

在我们的角度应用程序中,我们使用环境文件来加载一些配置.

environment.ts

export const environment = {
  production: false,
  defaultLocale: 'en_US',
};

然后我们在我们的服务中使用它:

import { environment } from '../../environments/environment';
import { TranslateService } from './translate.service';

@Injectable()
export class LocaleService {
  constructor(private translateService: TranslateService){}

  useDefaultLocaleAsLang(): void {
    const defaultLocale = environment.defaultLocale;
    this.translateService.setUsedLang(defaultLocale);
  }
}

所以我在服务方法中使用环境文件中的值.

在我们的测试文件中,我们当然可以在translateService上使用Spy:

translateService = jasmine.createSpyObj('translateService', ['setUsedLang']);

但我不知道如何在我的测试文件中模拟环境值(beforeEach例如).或者甚至将它转换为测试目的,Subject以便我可以改变它并测试不同的行为.

更一般地说,如何在测试中模拟这些导入值以确保不使用实际值？

在以前的项目中,我使用angular-cli来构建我的项目.现在我必须在.NET项目中直接使用webpack.我正在努力让一件简单的事情发挥作用:

• 使用全局style.css应用程序
• 将我的资产文件夹复制到dist

我的构建输出目录是wwwroot/dist(我们的项目要求).

Angular-cli有一个很好的"简化"配置:

"outDir": "../wwwroot/dist",
"assets": [
        "assets"
      ],
"styles": [        
        "styles.css"
      ],

然后我以一个正确的dist文件夹结束,我的资产移动到正确的输出目录,我的应用程序级别的styles.css在我的应用程序的任何地方都可用.

现在,我无法管理如何配置webpack以在新项目结构和配置中实现此功能.我认为我的团队使用VS2015模板启动了项目,该模板生成了一个通用结构:https://github.com/aspnet/JavaScriptServices/tree/dev/templates/Angular2Spa

我的项目结构:

我的两个webpack配置文件

webpack.config.js

var isDevBuild = process.argv.indexOf('--env.prod') < 0;
var path = require('path');
var webpack = require('webpack');
var nodeExternals = require('webpack-node-externals');
var merge = require('webpack-merge');
var allFilenamesExceptJavaScript = /\.(?!js(\?|$))([^.]+(\?|$))/;

// Configuration in common to both client-side and server-side bundles
var sharedConfig = {
    resolve: { extensions: [ '', '.js', '.ts' ] },
    output: {
        filename: '[name].js',
        publicPath: '/dist/' // Webpack …

我们希望在社交网络上分享指向Angular 2的网址.例如Facebook和Skype.

在我们的网站上,根据我们设置的实际网址参数和查询字符串,在此网址上显示动态图片.

例如,http://oursite.com/#/show/5448sd84f8d4sf8将显示/images/5448sd84f8d4sf8.png.

通过共享链接,似乎Facebook和Skype都使用Open Graph元og:image来显示网站的缩略图或快照:

<meta name="og:image" content="http://example.com/image.png">

有没有办法根据网址设置动态og:图像,如下所示:链接我们的网址会显示

<meta name="og:image" content="http://oursite.com/images/5448sd84f8d4sf8.png">

然后如何确保Facebook和Skype实际解析动态图像？

在我的应用程序中,我有一个按钮,甚至可以点击它:

<button class="btn btn-default" (click)="doSomething()">

从doSomething方法中,有没有办法(click)从按钮中删除事件(因此用户不能再触发功能？).

我试图在按钮上设置一个禁用的道具,但它不会改变Angular2的行为.

我试着用(click)="doSomething($event),然后

doSomething($event) {
  // My method logic goes here
  ...
  ...
  console.log('Method Logic');

  //Attempt to overwrite click event
  let target = event.target || event.srcElement || event.currentTarget;
  this.renderer.listen(target, 'click', (event) => {
      console.log('clic block');
    });
}

但它不会"替换"click事件.因此,在此之后,单击时,将触发原始逻辑和"单击块"控制台日志!

在我的一个组件的 html 中，我们使用了一些<ng-template>标签。

在标签内部，我们想定义一个引用来访问nativeElementdiv 中的@ViewChild。

我想要恢复的元素 Ref 在 tabset 指令中，在子指令 p-datatable sub 的 ng-template 中。

这是我们的 component.html 代码（我们使用 primeNG 和 ngx-bootstrap 模块和选项卡/数据表指令）：

<tabset #staticTabs>
    <tab>
        <ng-template tabHeading>
            <span class="hidden-sm-down">
                Tab Header Text
            </span>
        </ng-template>          
        <p-dataTable [value]="data">
            <p-column field="id" header="Id"></p-column>
            <p-column field="context" header="Context">
                <ng-template let-context="rowData" pTemplate="body">
                    <div class="container" #iWantThisElementNative></div>
                </ng-template>
            </p-column>
        </p-dataTable>
    </tab>
</tabset>

还有我们的 component.ts：

export class AppComponent implements OnInit, AfterViewInit {
  @ViewChild('iWantThisElementNative') iWantThisElementNative;

  ...

  ngAfterViewInit() {
    console.log(this.iWantThisElementNative.nativeElement);
  }
}

我们遇到的错误：

错误错误：未捕获（承诺）：类型错误：无法读取未定义的属性“nativeElement”

我试图移动带有标签集顶部的引用的 div，它工作正常。我试图将 …

我有一个AJAX表单,它将表单数据发布到本地API网址:/api/document.它包含一个文件和一个自定义ID.我们只想获取确切的接收请求并将其转发到远程API example.com:8000/document/upload.

是否有一种简单的方法可以使用Asp.NET Core实现对远程API的请求"转发"(或代理？)？

下面我们有想法简单地使用Web API Http客户端来获取请求然后重新发送它(通过这样做我们希望能够例如从后端附加一个私有api密钥),但它似乎不能正常工作,在PostAsync不接受Request.

Ajax发送的原始请求

POST http://localhost:62640/api/document HTTP/1.1
Host: localhost:62640
Connection: keep-alive
Content-Length: 77424
Accept: application/json
Cache-Control: no-cache
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryn1BS5IFplQcUklyt
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.8,fr;q=0.6

------WebKitFormBoundaryn1BS5IFplQcUklyt
Content-Disposition: form-data; name="fileToUpload"; filename="test-document.pdf"
Content-Type: application/pdf
...
------WebKitFormBoundaryn1BS5IFplQcUklyt
Content-Disposition: form-data; name="id"

someid
------WebKitFormBoundaryn1BS5IFplQcUklyt--

后端代码

我们的.NET Core后端有一个简单的"转发到另一个API"的目的.

public class DocumentUploadResult
{
     public int errorCode;
     public string docId;
} …

我尝试为 Angular 单元测试生成一个模拟文件，但我遇到了一些问题。

这是我的代码，在规范文件之上：

let content = "Hello Zip";
let data = new Blob([content], { type: 'application/zip' });
let arrayOfBlob = new Array<Blob>();
arrayOfBlob.push(data);
let applicationZip = new File(arrayOfBlob, "Mock.zip");

如果我尝试这样做：

console.log(applicationZip);

结果如下：

最后修改时间：1492785142174

lastModifiedDate：2017 年 4 月 21 日星期五 10:32:22 GMT-0400

名称："Mock.zip"

尺寸：9

类型： ””

webkitRelativePath:""

原型：文件

我要创建测试的方法之一必须检查文件的 mime 类型的有效性。

使用我的代码，类型始终为空。例如，我尝试将其设置为纯文本/文本，但它不会改变任何内容。

所以我猜我的文件模拟创建在某种程度上不正确，但我无法弄清楚错误。

在Rxjs 6之前,我们可以做到:

interface TypeA {
  payload: any;
}

source$.pipe(
  withLatestFrom(source2$, (source1: TypeA, source2: TypeB) => 
       ({ payload: source1.payload, source2 }) ),
)

我们可以在resultSelector方法参数中为这里构造的对象添加source1和source2传递适当的类型.

但现在我们必须做到以下几点:

source$.pipe(
  withLatestFrom(source2$),
  map(([source1, source2]) => ({ source1, source2 }) ),
)

这样做我们无法在数组参数中的source1和source2上添加类型.然后键入将丢失,IDE不建议.payload上source1的例子.

如何使用新语法添加数组参数的正确输入？