标签: angular9

我正在努力寻找服务中的哪一个root和platform选项更好。providedIn

两者都使服务在整个应用程序中可用，后者通过服务而前者通过根注入器。对此有什么建议吗？

我正在开发一个我们最近在 Angular 9 中启动的项目，该项目是使用 Angular CLI 生成的。我想使用 Jest 而不是 Karma 来运行测试，因为在我看来，在构建管道中设置 Karma 的工作量太大（几年前，我在尝试让 Karma 运行时浪费了很多时间）。

当我尝试运行 Jest 时，出现错误：

ReferenceError: Zone is not defined

      at node_modules/zone.js/dist/zone.js:670:5
      at performance (node_modules/zone.js/dist/zone.js:8:9)
      at Object.<anonymous> (node_modules/zone.js/dist/zone.js:9:2)

我安装 Jest 的步骤是：

1. 安装 Jest 本身

npm install -D jest jest-preset-Angular @types/jest ts-jest

2. 从 package.json 中删除所有 karma/jasmine 库

3. 更新了 tsconfig.spec.json：

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": [
      "jest",
      "node"
    ],
    "esModuleInterop": true,
    "emitDecoratorMetadata": true
  },
  "files": [
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.spec.ts",
    "src/**/*.d.ts"
  ]
}

4. 添加jest.config.js：

const …

我正在寻找当角度材质表（mat-table）渲染完成时触发的事件。

我认为需要在数据源更改时触发，或者用户更改显示的列或发生分页事件（但与数据源更改相同），或者发生重新渲染事件的任何其他事件。

我尝试了通用，ngOnChanges但当用户更改显示的列时它不会触发。

有类似的活动我可以听吗？

我在 Angular 9 项目中使用 @Output 装饰器，代码如下：

@Output('myMethod') myMethod: EventEmitter<any> = new EventEmitter();

Typescript 给了我一个错误，并迫使我在代码中添加以下内容以消除错误：

// tslint:disable-next-line:no-output-rename

如何在不禁用规则的情况下解决此问题？

我正在努力将我的项目从 Angular 8 升级到 9，并且在扩展类时遇到了新需求的问题。

根据 Angular 的文档：

使用 Angular 功能的未修饰基类

从版本 9 开始，不推荐使用未修饰的基类：

• 使用 Angular 功能
• 由指令或组件扩展

Angular 生命周期挂钩或以下任何 Angular 字段装饰器都被视为 Angular 功能：

• @Input()
• @Output()
• @HostBinding()
• @HostListener()
• @ViewChild()/@ViewChildren()
• @ContentChild()/@ContentChildren()

对于@Component装饰器，它需要基类上的templateor 。templateURL添加任一都会导致子类不呈现其模板。

例如，以下结果不会在视图上呈现任何内容：

@Component({
  template: ''
})
export abstract class BaseComponent<T extends AbstractSuperEntity> extends Toggler implements OnChanges {
  @Input()
  year: number | string

  constructor(service: MyService) {

  }

  ngOnChanges() {
  }
}

@Component({
  templateUrl: 'my.component.html',
  selector: 'my-component'
})
export …

我正在开发一个项目，其中有很多路线，每次单击链接转到特定路线时，页面不会自动滚动到顶部，这很烦人而且不好。请问有人知道如何解决这个问题吗？

我正在使用 Material 从事 Angular 9 项目。

我有一个支持排序（Mat-sort）的材质表。该排序运行良好。我现在只想允许某些列根据条件进行排序。有没有办法将mat-sort-header属性设置为条件？

这是我的表格和列：

<table mat-table [dataSource]="dataSource" matSort (matSortChange)="setSortInRoute()">
    <ng-container *ngFor="let column of tableConfig.columns">
      <ng-container matColumnDef="{{ column.columnDef }}">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ column.title }}</th>
        <td mat-cell *matCellDef="let row">
          {{ row[column.dataProperty[0]] }}
        </td>
      </ng-container>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr
      mat-row
      *matRowDef="let row; columns: displayedColumns"
      (click)="goToDetails(row)"
    ></tr>
  </table>

我尝试将mat-sort-header属性设置为一个条件，如下所示：布尔变量在[mat-sort-header]="sortColumn"哪里。sortColumn然而，即使 var 为 false，列仍然具有排序功能。

我计划让条件成为来自 的布尔变量tableConfig.columns，它可能是tableConfig.columns.allowSort。

有没有办法将此属性设置为条件？如果没有，关于如何实现这一目标有什么建议吗？

谢谢

我收到以下错误

类型“(user: User) => void”的参数不可分配给类型“(value: User, index: number) => ObservableInput”的参数。类型“void”不可分配给类型“ObservableInput”。

 getCurrentUserDb()
  {
    return this.login.authState.pipe(
                        switchMap(user=>{
                          return this.serviceUsers.getUserByuid(user.uid);
                        }),
                        map(user=>{
                          return user;
                        })
    )
  }

我正在使用带有辅助入口点的角度库我的库文件夹结构是

• 我的图书馆
  • 次要切入点1
    • 服务1
  • 次要入口点 2
    • 服务2
  • 源代码

我用了这个命令ng test my-library --code-coverage

辅助入口点的服务测试不执行。

然后我尝试将 src 文件夹下的“test.ts”上下文路径（“./”）更改为“../”。测试已执行，但代码覆盖率未创建。

如何对辅助入口点执行测试？

我使用 S3 和 CloudFront 服务在 AWS 中托管我的 Angular 9 应用程序。访问应用程序后，我在浏览器中收到以下错误：

\n
• 无法加载模块脚本：服务器响应非 JavaScript MIME 类型“text/html”。根据 HTML 规范对模块脚本强制执行严格的 MIME 类型检查。\n/polyfills-es2015.5af60e74e954ace452ee.js:1
\n
• 无法加载模块脚本：服务器响应非 JavaScript MIME 类型“text/html”。根据 HTML 规范对模块脚本强制执行严格的 MIME 类型检查。\n/main-es2015.9d477ae8338087e639b5.js:1
\n
• 无法加载模块脚本：服务器响应非 JavaScript MIME 类型“text/html”。根据 HTML 规范对模块脚本强制执行严格的 MIME 类型检查。
\n

我的index.html：

<!doctype html>\n<html>\n<head>    \n  <meta charset="utf-8">\n  <title>ReachApp Success</title>\n  <base href="/reach">\n    <!-- TODo: check for common configuration for material icon -->\n    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> \n  <meta name="viewport" content="width=device-width, initial-scale=1">\n  <link rel="icon" type="image/x-icon" href="favicon.ico">\n  <script src='https://www.google.com/recaptcha/api.js' async\xc2\xa0defer></script> \n<link rel="stylesheet" href="styles.7f06624db32e037ad1c6.css"></head>\n<body>\n  <reach-root></reach-root>\n …