标签: angular9

升级到 Angular 9 后，我收到一个奇怪的编译器错误。我已经更新了 4 个项目，其中 3 个没有任何问题，但最后一个项目抛出此错误：

ERROR in Error: [class] and [className] bindings cannot be used on the same element simultaneously
    at StylingBuilder.registerClassInput (C:\Users\kschramm\Documents\arzneimittel-wechsler\node_modules\@angular\compiler\bundles\compiler.umd.js:13564:27)
    at StylingBuilder.registerInputBasedOnName (C:\Users\kschramm\Documents\arzneimittel-wechsler\node_modules\@angular\compiler\bundles\compiler.umd.js:13527:36)
    at StylingBuilder.registerBoundInput (C:\Users\kschramm\Documents\arzneimittel-wechsler\node_modules\@angular\compiler\bundles\compiler.umd.js:13503:36)
    at C:\Users\kschramm\Documents\arzneimittel-wechsler\node_modules\@angular\compiler\bundles\compiler.umd.js:17296:57
    at Array.forEach (<anonymous>)
    at TemplateDefinitionBuilder.visitElement (C:\Users\kschramm\Documents\arzneimittel-wechsler\node_modules\@angular\compiler\bundles\compiler.umd.js:17295:28)
    at Element.visit (C:\Users\kschramm\Documents\arzneimittel-wechsler\node_modules\@angular\compiler\bundles\compiler.umd.js:4268:71)
    at visitAll (C:\Users\kschramm\Documents\arzneimittel-wechsler\node_modules\@angular\compiler\bundles\compiler.umd.js:4435:40)
    at TemplateDefinitionBuilder.buildTemplateFunction (C:\Users\kschramm\Documents\arzneimittel-wechsler\node_modules\@angular\compiler\bundles\compiler.umd.js:16982:13)
    at C:\Users\kschramm\Documents\arzneimittel-wechsler\node_modules\@angular\compiler\bundles\compiler.umd.js:17558:60
    at C:\Users\kschramm\Documents\arzneimittel-wechsler\node_modules\@angular\compiler\bundles\compiler.umd.js:16992:81
    at Array.forEach (<anonymous>)
    at TemplateDefinitionBuilder.buildTemplateFunction (C:\Users\kschramm\Documents\arzneimittel-wechsler\node_modules\@angular\compiler\bundles\compiler.umd.js:16992:37)
    at C:\Users\kschramm\Documents\arzneimittel-wechsler\node_modules\@angular\compiler\bundles\compiler.umd.js:17558:60
    at C:\Users\kschramm\Documents\arzneimittel-wechsler\node_modules\@angular\compiler\bundles\compiler.umd.js:16992:81
    at Array.forEach (<anonymous>)

我不知道是什么导致了这个错误，有人知道吗？

我在路由器 NavigationEnd 上使用订阅，如下所示：

this.router.events
  .subscribe((event) => {
    if (event instanceof NavigationEnd) {
      this.getData();
    }
  });

在同一路线中导航时，我需要它来更新页面数据，例如 /product1 和 /product2 使用相同的组件和路线，并在自定义路线服务中处理

这是为了当同一组件中的路由更新时获取数据，并且它按预期工作

问题是 this.getData() 在导航到另一个组件时也会运行，这会在我导航到的组件中产生很多问题，并且我还从服务器运行不必要的获取

所以问题是：当我离开组件时，我可以取消订阅路由器，这样 this.getData() 就不会运行吗？

我正在学习 Udemy ( https://www.udemy.com/course/build-an-app-with-aspnet-core-and-angular-from-scratch )的课程，到目前为止，很好，直到我尝试安装 ngx-bootstrap 。

我安装npm install ngx-bootstrap --save在一个Angular9项目上，并ng build收到以下错误：

Compiling ngx-bootstrap : es2015 as esm2015

ERROR in Failed to find exported name of node (class ButtonRadioGroupDirective {
    constructor(cdr) {
        this.cdr = cdr;
        this.onChange = Function.prototype;
        this.onTouched = Function.prototype;
    }
    get value() {
        return this._value;
    }
    set value(value) {
        this._value = value;
    }
    writeValue(value) {
        this._value = value;
        this.cdr.markForCheck();
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    } …

我正在开发一个应用程序，我第一次使用 PWA，并且尝试使用推送通知等。

目前，如果我执行以下命令ng build --prod和http-server -p 8080 -c-1 dist/myProject，我就可以让 PWA 工作，但我想知道是否有一种方法可以让 PWA 工作ng serve，这样我就不必经常构建项目，因为这需要相当长的时间。

编辑：添加信息

我尝试通过添加serve来修改对象angular.json

            "assets": [
              "src/manifest.webmanifest"
            ]

属性，options但这给出了错误Data path "" should NOT have additional properties(assets)，所以我认为这不是要走的路。

我有一个返回类型文档的 api 调用：content-type
image/png

图像被发回，但没有 url，它只是发回整个图像对象。如果直接在浏览器上调用 api，它只会直接显示图像。

我希望能够有一个服务来获取此图像并将其显示在组件中。

图像数据.ts

import { Observable } from 'rxjs';

export interface ImageInfo {
    image: Image
}

export abstract class ImageData {
  abstract getImageData(): Observable<ImageInfo>;
}

图像数据服务.ts

import { Injectable } from '@angular/core';
import { of as observableOf, Observable } from 'rxjs';
import { ImageInfo, ImageData } from '../data/image-data';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { throwError } from 'rxjs';
import { retry, catchError } from 'rxjs/operators';

@Injectable()
export class ImageDataService extends ImageData …

我正在从事 Angular 9 项目。

我有一个可重复使用的表，现在我有两个（父）组件使用该表。我希望用户能够选择表格上的项目并路由到该项目的详细信息页面。问题是这些表位于两个不同的路由（假设：/lists/parent1和lists/parent2），并且详细信息页面是这些路由的扩展。因此，如果您单击parent1 表的某个项目，则需要转到路线/lists/parent1/details/${id}，如果您使用parent2 的表，则需要转到/lists/parent2/details/${id}。我还通过路由器传递状态数据，并设置 queryParamsHandling。

我认为可以通过多种方式做到这一点，并且我正在尝试找出哪种方法最好。

• 选择 1）当用户单击表中的项目（子组件）时，我会导致表组件发出事件，导致父组件导航到详细信息页面。这是有效的，因为父级知道其当前路线在哪里，所以我可以简单地执行以下操作：

this.router.navigate([`lists/parent1/details/` + row.id], {
      queryParamsHandling: "merge",
      state: { data: row }
    });

在parent1中和在parent2中以同样的方式。缺点是父母双方都使用非常相似的函数（重复的代码？）

• 选择 2）我将当前路由从父组件传递到表（子组件）。这只是一个输入，我将在表组件中使用此函数来导航用户：

goToDetails(row): void {
    this.router.navigate([`${currentRouteInput}/details/` + row.id], {
      queryParamsHandling: "merge",
      state: { data: row }
    });
  }

• Opt3）我在表组件的构造函数中找到当前路径（使用this.router.events），然后设置它并在goToDetails()上面使用的 func 中使用它而不是输入参数。

• 选项4) ??? 出于某种原因，我认为有一种方法可以通过添加到当前路线来简单地进行导航。例如：如果您在路线上，/lists/parent1我认为有一个路由器导航功能router.navigateFromRoute.(['/details/${id}'])，它只会从当前路线导航并添加到它，所以：/lists/parent1/details/${id}。但我看到的唯一路由器导航功能是navigate()和navigateByUrl()。这存在吗？我不知道为什么我这么想。

一种方法比其他方法更好吗？我想让这个表组件保持可重用。此类功能有标准做法吗？

我将不胜感激任何见解和提示，谢谢！

我做了很多研究，但找不到生成 ng-zorro 主题并在运行时更改它的方法。

最后，我找到了一种方法来做到这一点。

使用 Angular 9，我需要根据返回两个可观察值的两种方法检查条件：

    return zip(this.authService.isSignedIn(), this.authService.getRole()).pipe(
      map(([isSignedIn, role]: [boolean, string]) => isSignedIn && role && role.toLowerCase() === 'admin')
    );

但我收到错误：

 Property 'pipe' does not exist on type 'OperatorFunction<unknown, [unknown, boolean, any]>

我缺少什么？

我正在使用 angular v9 "@angular/core": "9.0.6"，在安装 "@ngx-translate/core" 和 "@ngx-translate/http-loader" 后，我收到了这个错误 "ERROR in getInternalNameOfClass( ) 在非 ES5 类上调用：在运行应用程序时，预期 TranslateFakeLoader 具有内部类声明”。

"@angular/core": "9.0.6"
"@ngx-translate/core": "^13.0.0",
"@ngx-translate/http-loader": "^6.0.0",

请知道如何解决这个问题？

搜索了 Ivy 和 AOT 之后，我很困惑，到底是谁在编译代码？