标签: angular9

我正在调用 ngFor 中的一种方法来获取输入的标签，即使在 ngFor 中有 2 个项目，它也会触发 8 次。它应该只被调用两次。多次被调用的原因可能是什么？

<form [formGroup]="parentForm">
   <div formGroupName="child">
    <ng-container *ngFor="let item of parentForm.get('child').controls | keyvalue; let i = index">
      <div class="form-group">
      <label>{{getLabel(item.key)}} {{i}} </label>
      <input type="text" [formControlName]="item.key">
      </div>
    </ng-container>
   </div>
  </form>   

  getLabel(item) {
     console.log('trigger item') // its get printed in console for 8 times
  if(item == 'data')  { 
    return 'Your Data' 
  } 
  return 'Your Name'
  }

游乐场：https://stackblitz.com/edit/angular-ivy-hnaegv ?file=src%2Fapp%2Fapp.component.html

我的 Angular 9 应用程序有一个 CustomErrorHandler 和一个 ErrorPageComponent。当整个应用程序抛出任何异常时，CustomErrorHandler 将告诉路由器导航到 ErrorPageComponent。但是，ErrorPageComponent 内部有一个按钮可能会抛出自己的异常，在这种情况下，我希望 CustomErrorHandler 仍然告诉路由器导航到 ErrorPageComponent，就像正常情况一样。然而，当ErrorPageComponent以这种方式路由到自身时，它需要再次调用其初始化方法。

通常，如果您希望组件在路由到自身后调用初始化方法，只需订阅路由事件即可。然后，只要你正确设置了 onSameUrlNavigation 来重新加载，当组件导航到自身时，路由器就会触发一个路由事件，并调用你的组件订阅它的回调方法。

但是，当我的 CustomErrorHandler 告诉路由器导航到 ErrorPageComponent 时，不会触发任何路由事件。

如果您查看代码，这会更有意义：

这是我在 app-routing.module.ts 中的路由配置：

const routes: Routes = [
  { path: 'normal', component: NormalComponent},
  { path: '',   redirectTo: '/normal', pathMatch: 'full'}
];

const volitileRoutes: Routes = [
  { path: 'error', component: ErrorPageComponent}
];

const fallbackRoute: Routes = [
  { path: '**', component: Error404PageComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes),
    RouterModule.forRoot(volitileRoutes, {onSameUrlNavigation: 'reload'}), // I've correctly set onSameUrlNavigation …

我刚刚将我的项目更新到 Angular 9。此外，我还将 PrimeNG 更新到 9.1.2。现在我的

import {GrowlModule} from 'primeng/primeng';

不起作用，它说GrowlModule该目录中没有。我知道在版本 9 中一些导入已经改变，所以我也尝试过，primeng/api但它也不存在。有人可以告诉我在哪里可以找到这个模块吗？

我是 Angular 新手，尝试从 9.0.0 升级到 9.1.11，以将我的打字稿升级为3.7.5 to 3.8在我的应用程序中使用国家/地区地图插件。

当我运行命令时ng update @angular/cli@9.1 @angular/core@9.1我得到了

Using package manager: 'npm' Collecting installed dependencies... Found 68 dependencies. Fetching dependency metadata from registry...\n                  Package "yamapng" has an incompatible peer dependency to "@angular/common" (requires "^7.1.0" (extended), would install "9.1.12").\n                  Package "yamapng" has an incompatible peer dependency to "@angular/core" (requires "^7.1.0" (extended), would install "9.1.12").\n                  Package "angular-svg-round-progressbar" has an incompatible peer dependency to "zone.js" (requires "^0.9.0", would install "0.10.3"). \xc3\x97 Migration failed: …

我有一个使用版本 9 的 Angular 应用程序。从我的一条路线（例如/search/details/id），我使用从 API 响应收到的 URL 值重定向到外部 URL，例如

window.location.href = "https://www.payment.com";

现在我被重定向到外部付款页面，我可以在其中付款或取消交易。

如果我单击“取消”，我将被重定向回上一页，这是我的角度应用程序，路线为/search/details/:id。从这里，如果我单击浏览器后退按钮，我将进入支付页面https://www. payment.com。我想导航到 Angular app /search路线，而不是我最初导航到 /search/details/id 的路线。

我尝试通过以下方式处理组件中的浏览器后退按钮，

1. fromEvent(window, 'popstate')
      .subscribe((e) => {
        console.log(e, 'back button');
        this.router.navigate(
          ['/search']);
   });
   Added inside the constructor of the component corresponding to /search/details/:id

2. router.events.forEach((event) => {
      if(event instanceof NavigationStart) {
        if (event.navigationTrigger === 'popstate') {
          console.log(event, 'back button router');
        }
      }
    });
    Added inside constructor
3. @HostListener('window:popstate', ['$event'])
  onPopState(event) {
    this.router.navigate( …

我正在尝试将此库https://github.com/flauc/angular2-notifications从 Angular 2+迁移到 Angular 9。

最初的错误是关于ModuleWithProviders已经成为泛型类型的，所以我修复了它。我也在这里描述了一个错误https://github.com/angular/angular/issues/32352我修复了它require('@angular/compiler-cli');，现在我面临另一个错误：

../node_modules/@angular/common/common.d.ts:115:22 - 错误 NG6002：出现在 SimpleNotificationsModule 的 NgModule.imports 中，但无法解析为 NgModule 类

我很难理解发生了什么，因为我以前从未构建过库，并且使用 gulp 构建似乎有点 hacky，因为这一行ngc = require('@angular/compiler-cli/src/main').main引用了一个不属于公共 API 的函数。

编辑：

按照评论中的想法（以及我自己的感觉），我尝试在没有吞咽的情况下进行构建：

• 创建了一个angular.json文件
• 分离index.ts成public_api.ts和simple-notifications.module.ts
• 对文件和文件夹结构做了一些更改

但我仍然有同样的确切错误......

我的尝试：https : //github.com/youkouleley/angular2-notifications 我尝试用 构建它ng build，其中的脚本package.json尚未更新

我最近将我的项目升级到了 angular 9。

问题：-

我在模板中遇到了 Local Reference('#') 的问题。

我得到的值为“未定义”。

目标： 我试图在滚动时关闭 mat-select。

代码：

html

<mat-select (selectionChange)="showDataForLocation($event)"
            [(value)]="dataService.startinglocation"
            (openedChange)="selectPanelOpened($event)" 
            #mySelect>

      <mat-option  aria-selected="true" [value]="location.ExLocationName" 
                  *ngFor="let location of startingPointData?.ExLocation"> 
                    {{location.ExLocationName}}
      </mat-option>
</mat-select>

TS代码

@ViewChild('mySelect', { static: true }) mySelect;

@HostListener('window:scroll', [])
  onWindowScroll() {

    this.mySelect.close();
  }

以上在 Angular 5 上运行良好，但是现在它在 9 上抛出错误。

Uncaught TypeError: Cannot read property 'close' of undefined
    at DetailComponent.onWindowScroll (detail.component.ts:1378)
    at DetailComponent_scroll_HostBindingHandler (detail.component.ts:77)
    at executeListenerWithErrorHandling (core.js:21593)
    at wrapListenerIn_markDirtyAndPreventDefault (core.js:21635)
    at platform-browser.js:934
    at ZoneDelegate.invokeTask (zone-evergreen.js:400)
    at Object.onInvokeTask (core.js:40744)
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at …

将 Angular 应用程序从版本 8 更新到 9 后，出现以下错误： No component factory found for <component>. Did you add it to @NgModule.entryComponents?

但正如Angular Update Guide 所述，entryComponents不再需要添加组件：

Angular 9 Ivy 现在是默认渲染引擎

...

如果你在你的 NgModules 中指定了任何 entryComponents 或者使用了 ANALYZE_FOR_ENTRY_COMPONENTS，你可以删除它们。Ivy 编译器和运行时不再需要它们。

我正在使用以下软件包版本：

"dependencies": {
  "@angular/animations": "~9.0.3",
  "@angular/cdk": "~9.1.0",
  "@angular/common": "~9.0.3",
  "@angular/compiler": "~9.0.3",
  "@angular/core": "~9.0.3",
  "@angular/forms": "~9.0.3",
  "@angular/material": "^9.1.0",
  "@angular/platform-browser": "~9.0.3",
  "@angular/platform-browser-dynamic": "~9.0.3",
  "@angular/router": "~9.0.3",
},
"devDependencies": {
  "@angular-devkit/build-angular": "~0.900.3",
  "@angular-devkit/build-ng-packagr": "~0.900.3",
  "@angular/cli": "~9.0.3",
  "@angular/compiler-cli": "~9.0.3",
  "@angular/language-service": "~9.0.3",
}

这是我用来动态创建组件的代码：

@ViewChild('target', {static: true, …

我正在尝试将我的应用程序从 7 迁移到 9，这里 Angular 9 中的新 IVY 编译器与库angular-webstorage-service不兼容， 抛出以下错误。

node_modules/angular-webstorage-service/src/storage-service.module.d.ts:9:22 中的错误 - 错误 NG6002：出现在 AppModule 的 NgModule.imports 中，但无法解析为 NgModule 类。

这可能意味着声明 StorageServiceModule 的库（angular-webstorage-service）没有被 s 正确处理，也没有被 ngcc 正确处理，或者与 Angular Ivy 不兼容。如果是，请检查较新的版本是否更新。还要考虑检查库是否可用，如果是，则更新。还可以考虑与库的作者核对以查看该库是否与 Ivy 兼容。

关于 Angular 9 兼容性的任何想法

错误参考错误：文档未定义

import { readFileSync } from 'fs';
const domino = require('domino');  // import the library `domino`
const DIST_FOLDER = join(process.cwd(), 'dist/browser');
const template = readFileSync(join(DIST_FOLDER, 'index.html')).toString(); // use `index.html` as template
const win = domino.createWindow(template); // create object Window
global['window'] = win;
global['Event'] = win.Event;               // assign the `win.Event` to prop `Event`
global['document'] = win.document;

即使在 Server.ts 中添加这个修复问题但在性能 TTFB 时间太高。任何有解决方案...？