标签: angular5

重新加载Chrome扩展程序时出现此错误:

Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:".


    at new Function (<anonymous>)
    at evalExpression (compiler.js:33919)
    at jitStatements (compiler.js:33937)
    at JitCompiler.webpackJsonp.../../../compiler/esm5/compiler.js.JitCompiler._interpretOrJit (compiler.js:34520)
    at JitCompiler.webpackJsonp.../../../compiler/esm5/compiler.js.JitCompiler._compileTemplate (compiler.js:34448)
    at compiler.js:34347
    at Set.forEach (<anonymous>)
    at JitCompiler.webpackJsonp.../../../compiler/esm5/compiler.js.JitCompiler._compileComponents (compiler.js:34347)
    at compiler.js:34217
    at Object.then (compiler.js:474)

我在manifest.json中有这个:

 "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"

我可以使用任何其他设置来避免该错误吗？

我正在使用@ ngx-translate在我正在创建的Angular 5应用程序中进行语言处理.该应用程序有两个功能模块,一个是延迟加载的,另一个是预先加载的.

问题是转换管道在急切加载的模块中工作正常但不是懒惰加载的模块.我该如何解决这个问题？

我正在将AngularJS 1.6应用程序转换为Angular 5,我试图弄清楚为什么我的服务在APP_INITIALIZER完成之前被初始化.

语境:

• 我需要在初始化应用程序之前使用httpClient获取应用程序配置
• 所有http请求都需要从获取的配置中获取应用ID才能解析

在AngularJS 1.6中:

在这里,我做了一个HTTP请求来获取应用程序配置,并且我存储在一个.value()所以我可以在引导它之后将其注入我的所有应用程序中.

function getApp(): ng.IHttpPromise<Application> {
  const injector = angular.injector(['ng']);
  const $http: ng.IHttpService = injector.get('$http');
  const appSlug: string = window.location.pathname.split('/')[1];

  return $http.get(`/v3/app/${appSlug}`, { headers: { 'Cache-Control': 'no-cache' } });
}

getApp()
  .then((application) => {
    angular.module(app)
      .value('APP_CONFIG', angular.extend({}, application.data, ENV));

    bootstrap();
  })
  .catch((error) => {
    alert('There was an error starting the app. Please try refreshing your browser.');
  });

在Angular 5中:

目前的行为:

• 执行news.service.ts类构造函数(这是我需要应用程序ID的地方)
• APP_INITIALIZER工厂解析(这是我将app id分配给app.provider.ts的地方)
• news.component.ts ngOnInit按预期调用(在APP_INITIALIZER完成后)

与AngularJS 1.6应用程序实现相同行为的策略是什么？

码:

app.module.ts

export …

我有一个用于在angular 5应用程序中上载文件的表单，并且由于我完全是从前一阵子编写的代码中复制出来的，所以我可以保证它以前曾经工作过。

这是我的HTML代码：

<form [formGroup]="form" (ngSubmit)="onSubmit()">
        <div class="form-group">
            <label>File:</label>
            <input #theFile type="file" (change)="onFileChange($event)" accept=".png" class="form-control" 
                    formControlName="content" />
            <input type="hidden" name="fileHidden" formControlName="imageInput"/>

                    <!-- [(ngModel)]="model.content" -->

            <div class="alert alert-danger" *ngIf="!form.prestine && form.controls.content.errors?.noFile">
                Please provide a photo.
            </div>
            <div class="alert alert-danger" *ngIf="form.controls.content.errors?.fileTooBig">
                The file is too big and won't uploaded. Maximum allowed size is 500kb.
            </div>
        </div>
        <div class="form-group">
            <label>Notes</label>
            <textarea type="text" class="form-control" formControlName="notes" [(ngModel)]="model.notes" > </textarea>
        </div>
        <button type="submit" class="btn btn-primary" [disabled]="!form.valid">Submit</button>
        <button class="btn btn-default" type="button" (click)="close(false);">Cancel</button>
    </form>

这是fileUpload控件中使用的“ onFileChange”方法：

onFileChange($event)
  { …

我已经在我的一个组件文件中创建了一个函数，该函数可以重置form（myform）：

`onSubmit() {
  if (this.myform.valid) {
    console.log("Form Submitted!");
    this.myform.reset();
  }
}`

重设整个表单效果非常好，但是可以重设一些元素并保持其他相同的方式。

我试图在我的develepping平台中实现一些统计数据,我尝试使用ngx-charts来显示它们.但是我得到一个错误,我无法弄清楚为什么.

我正在使用storedProcedures进行MySQL统计,我从Java Restful Backend调用它并在Angular 5前端返回它们.返回的表格包含以下两个字段:日期和每天的事件数.所以后端返回的表有这两列.

我呈现图表的组件代码如下:

import {Component, OnInit} from '@angular/core';
import {StatisticsService} from '../../statistics.service';


class Data {

  private _name: string;
  private _value: number;

  get name(): string {
    return this._name;
  }

  set name(value: string) {
    this._name = value;
  }

  get value(): number {
    return this._value;
  }

  set value(value: number) {
    this._value = value;
  }

}


@Component({
  selector: 'app-daily-incidents-statistics',
  templateUrl: './daily-incidents-statistics.component.html',
  styleUrls: ['./daily-incidents-statistics.component.css']
})


export class DailyIncidentsStatisticsComponent implements OnInit {


  view: any[] = [700, 400];
  data: any[] = [];

  // options …

我正在使用富文本编辑器组件primeng.这个编辑器将我键入的所有内容都转换为html.但有时我想用纯文本输出这些文本.angular 2是否提供了一种从文本中轻松删除html标签的方法？

谢谢.

默认情况下，如果Angular Material Table从包含它的单元格中溢出，则将内容放在下面的新行中。我试图对其进行设置，以使溢出的文本被截断为“ ...”。我现在拥有的代码不会截断内容并将其显示在一行中，直到它从父级溢出为止<div>

我之所以使用<table mat-table>而不是<mat-table>因为它具有根据Angular Material网站中所述的内容根据内容调整大小的列。我尝试创建的表具有响应能力，并根据其父级的大小调整自身大小<div>

HTML：

<div class="table-content">
  <table mat-table [dataSource]="dataSource" class="table-container">
    <ng-container [matColumnDef]="item" *ngFor="let item of displayedColumns">
      <th mat-header-cell *matHeaderCellDef>{{item}} </th>
      <td mat-cell *matCellDef="let element">
        <div class="table-data-content">
          <span>{{element[item]}}</span>
        </div>
      </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns;"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
</div>

CSS：

.table-container {
  position: absolute;
  width: 100%;
  height: 100%;
}
.table-data-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

角度组件中使用的示例数据：

  dataSource = [
    { Name: "Some file …

我ngx-bootstrap在 Angular 5 项目中使用。有谁知道如何结合日期选择器与Timepicker？当我选择一个时间时，它总是包括今天的日期。我想使用Datepicker.

如果可能的话，最好将它放在同一模型上。这个想法是将它传递给webapi接受datetime属性（c#）的 a 。

提前致谢！

在我的 Angular 5 应用程序中使用 "@ng-bootstrap/ng-bootstrap": "1.0.0-beta.6" 版本时，一切看起来都很好。但是，如果我在模态窗口中有一个触发路线更改的按钮，则即使在路线更改之后，模态窗口也不会关闭。

在很少的研究中，我发现了类似的东西，在以前的引导程序版本中，点击模态窗口，我们用来查看特定组件内与模态窗口相关的代码，以及随着组件被销毁，甚至模态窗口被销毁时的路由更改。但是在当前版本中，我几乎在 body 标记的末尾看到了与模态窗口相关的代码，这些代码不受路由更改的影响。

无论如何要在路线更改时关闭模态？