标签: angular9

我有一个像这样的组件

import { Component } from '@angular/core';

interface ItemBaseType {
   foo: boolean;
}

interface ItemType extends ItemBaseType {
   bar: boolean;
}

@Component({
  selector: 'ac-foo',
  template: `<div *ngIf="item.bar">Hello</div>`,
})
export class FooComponent {
   public item: ItemType;
}

我在 Angular 9 应用程序上启用了fullTemplateTypeCheck 和 strictTemplates，它在运行时引发异常ng serve：

类型“ItemBaseType”上不存在属性“bar”。

但bar存在于ItemType.

出了什么问题？

我使用的是 Mac，目前安装了 Angular 8 版本。

我想升级到 Angular 9，所以我这样做了：

npm uninstall -g angular-cli
npm cache clean or sudo npm cache verify
npm install -g @angular/cli@latest

我没有犯错误，但是当我这样做时

ng--版本

这是回归版本8。

如何更新到版本 9？

我正在使用 "@angular/localize": "^9.0.2" 并且我有一条带有动态标题的路线，应该翻译：

const routes: Routes = [
  { path: 'overview', component: DashboardPageComponent, data: { title:  $localize`:@@overview:Overview`, breadcrumb: 'Overview' } },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class DashboardRoutingModule { }

消息.es.xlf

<unit id="overview">
  <segment>
    <source>Overview</source>
    <target>Vista general</target>
  </segment>
</unit>

但是当我运行时ng serve --configuration=es，显示以下错误：

ERROR in src/app/dashboards/dashboard-routing.module.ts(8,7): Error during template compile of 'DashboardRoutingModule'
  Reference to a local (non-exported) symbols are not supported in decorators but 'routes' was referenced
    Consider exporting 'routes'.

此外，我阅读了文章：https://blog.ninja-squad.com/2019/12/10/angular-localize/寻找解决方法，例如：

ERROR in …

我正在重用 HTTP 通信服务，该服务在 Angular 8 下运行良好，但在 Angular 9 下引发以下错误：

Error: Cannot instantiate cyclic dependency! HttpService
    at throwCyclicDependencyError (core.js:8122)
    at R3Injector.hydrate (core.js:17206)
    at R3Injector.get (core.js:16960)
    at NgModuleRef$1.get (core.js:36337)
    at Object.get (core.js:33981)
    at getOrCreateInjectable (core.js:5880)
    at Module.??directiveInject (core.js:21115)
    at NodeInjectorFactory.DashboardComponent_Factory [as factory] (dashboard.component.ts:9)
    at getNodeInjectable (core.js:6025)
    at instantiateRootComponent (core.js:12788)
    at resolvePromise (zone-evergreen.js:798)
    at resolvePromise (zone-evergreen.js:750)
    at zone-evergreen.js:860
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:41640)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
    at Zone.runTask (zone-evergreen.js:167)
    at drainMicroTaskQueue (zone-evergreen.js:569)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:484)
    at invokeTask (zone-evergreen.js:1621)

这是 HTTP …

通过 CSS 属性“transform: scale(0.5)”进行缩放的 Angular CDK 拖放无法按预期工作。

如果外部 DIV 由 CSS 属性“transform: scale(0.5)”缩放，则拖动不会与鼠标指针正确对齐。只要比例不等于 1，就会发生这种情况。

这里有一个例子：https : //stackblitz.com/edit/angular-2q1mte

我知道这篇文章拖放缩放无法按预期工作，因此

“@Input('cdkDragConstrainPosition') constrainPosition: (point: Point, dragRef: DragRef) => Point”.

但是如何编写自定义逻辑以使用指针正确映射拖动？或者是否有任何其他解决方案可以提供缩放功能但保持拖动与鼠标指针正确对齐？

任何帮助表示赞赏

我有一个调用GET请求的垫表。另外，我有一个 Mat Dialog，它接收数据并保存点击调用POST请求。一切正常，但有时在我单击“保存”按钮后表格会更新，但有时不会（我必须重新加载页面并查看它更新）。

mat-dialog.component.ts

onSubmit() {  // This method is called on the button click in Mat-Dialog
    if(this.formdata.invalid) {
      return;
    }
    this.adminService.createQuestionCategory(this.formdata.value).subscribe(reponse => {
      this._snackBar.open('New Question Category Added Successfully', '', {
        duration: 7500,
        horizontalPosition: this.horizontalPosition,
        verticalPosition: this.verticalPosition
      });
    });
  }

main.component.ts

constructor(private adminCategory: AdminCategoryService, private fb: FormBuilder, public dialog: MatDialog) { 
    dialog.afterAllClosed.subscribe(() => {
      console.log(''); // This line gets called everytime on close of the modal
      this.getTableData(); // So this line also gets called but not …

我正在尝试使用 angular 9 开发 SPA，我几乎尝试延迟加载每个组件及其所有子组件。当我尝试在延迟加载的组件之一中使用路由器插座时出现了我的问题，并且我希望使用此路由器插座来加载子组件（这也是延迟加载的）。当我这样做时，我总是在 app.component.html 的主路由器出口中加载所有嵌套的延迟加载组件，而不是嵌套延迟加载组件中的路由器出口

app.component 模板：

<app-navbar></app-navbar>
<router-outlet></router-outlet>

app-routing.module:

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'login', component: LoginComponent },
  { path: 'articles', loadChildren: () => import('./articles-viewer/articles-viewer.module').then(m => m.ArticlesViewerModule) },
  { path: 'dashboard', loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule) },
  { path: '**', redirectTo: ''}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

应用模块：

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    LoginComponent,
    NavbarComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule, …

我正在尝试将最新的 Angular Material 与 Angular 9 一起使用，但我遇到了以下问题

这是我的 app.modul.ts

import { NgModule } from '@angular/core';
import { CommonModule, CurrencyPipe } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientJsonpModule } from '@angular/common/http';
import { HttpClientModule } from '@angular/common/http';
import { ModalModule } from 'ngx-bootstrap/modal';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { CollapseModule } from 'ngx-bootstrap/collapse';
import { TabsModule } from 'ngx-bootstrap/tabs';
import { NgxPaginationModule } from 'ngx-pagination';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent …

如何一次性替换或更改旧的组件前缀？

或者

如何使前缀动态化，以便每当想要更改它时都会更新所有组件前缀？

我在 Angular 中使用ngx-owl-carousel-o库。每个轮播项目都被创建为一个带有（点击）事件的 div。我遇到的问题是，在拖动轮播时，它总是会不合需要地触发点击事件，即点击应该只在不拖动时触发。

<owl-carousel-o [options]="customOptions" (dragging)="on_carouselDrag($event.dragging)">
    <ng-container *ngFor="let item of items">
        <ng-template carouselSlide>
            <div (click)="on_itemSelected(item)">
                <!-- ... -->
            </div>
        </ng-template>
    </ng-container>
</owl-carousel-o>

我已经制定了一个似乎有效的解决方案，但我不确定它是否适合使用setTimeout. 我基本上只是用它来延迟结束on_carouselDrag以确保on_vendorSelected首先触发。

on_itemSelected(item: string): void {
  if(!this.isDragging){
    // ...
  }
}

on_carouselDrag(dragging: boolean){
  setTimeout(() => {
    this.isDragging = dragging;
  }, 10 )
}

如果可以改进这种方法，将不胜感激。