标签: angular8

只是想学习 Angular 2+（特别是 8），对于我的一生，我无法理解为什么类变量在类函数内是“未定义”的，但如果我用 ES6 风格编写函数则可以访问。

我尝试在构造函数中设置，但这没有意义。

export class GameControlComponent implements OnInit {

    myVar;
    counter = 0; 

    constructor() {}  ngOnInit() {}

    handleClickStart() {

        this.myVar = setInterval(this.myFunc, 1500);
    }

    myFunc() {
        this.counter++;
        console.log(this.counter);  
    }
}

调用“handleClickStart”后，每 1.5 秒输出 NaN。为什么？？？？我本来期望1 2 3......

以这种方式实现handleClickStart给了我想要的结果：

handleClickStart() {    
    this.myVar = setInterval(() => {
      console.log(this.counter + 1);
      this.counter++;
    }, 1500);
}

但仍然不明白为什么第一种方法没有成功。

我的角度应用程序中有多个延迟加载的模块，其中尝试使用子路由，但在页面重新加载/刷新时不起作用

在单击功能上工作正常，导航到预期组件，但在页面刷新时它不适用于 localhost:4200/port-move/overview。

localhost:4200/overview - 这适用于刷新。可以将其更正为方法 - > localhost:4200/port-move/overview 。有人可以帮忙吗

主 Rouitng 模块 (app-routing.module.ts) 中的路由：

const routes: Routes = [
  { path: '', redirectTo: 'search-uploads', pathMatch: 'full' },
  { path: 'port-move', loadChildren: () => import('./modules/routes/port-move/port-move.module').then(mod => mod.PortMoveModule) },
  { path: 'change-card', loadChildren: './modules/routes/change-card/change-card.module#ChangeCardModule' },
  { path: 'search-uploads', loadChildren: './modules/routes/search-uploads/search-uploads.module#SearchUploadsModule' },
  { path: 'inventory-recovery', loadChildren: './modules/routes/inventory-recovery/inventory-recovery.module#InventoryRecoveryModule' }
];

Port-move/（惰性模块之一）中的路由：

const routes: Routes = [
    { path: '', component: PortMoveComponent },
    { path: 'overview', component: PortMoveOverviewComponent }
]

单击功能导航到 Port-move-overview 组件，其中 port-move …

我有一个文件需要在另一个 css 文件中使用。

为此，我已将此添加到 angular.json 文件中：

   "styles": ["src/assets/css/theme.scss"],

然后我尝试在 css 文件中使用它：

@import "theme.scss";

Angular 找不到这条路径。

注意。我通过谷歌搜索得到了一组结果，但正如我最后解释的那样，由于多样性，我觉得它们不可靠。

我有两种实用方法 - 一种用于导航到父节点，一种用于重新加载 self. 第一个按预期工作，而另一个无法导致重新加载。

navigateToParent(route: ActivatedRoute) {
  const options: NavigationExtras = { relativeTo: route };
  this.router.navigate([".."], options);
}

navigateToSelf(route: ActivatedRoute) {
  this.router.routeReuseStrategy.shouldReuseRoute = () => false;
  this.router.onSameUrlNavigation = "reload";
  const self = ".";
  this.router.navigate([self]);

  // const options: NavigationExtras = { relativeTo: route };
  // this.router.navigate(["."], options);
}

我遵循了这里的答案，唯一的例外是我希望我的路径导航到通用，而不是硬编码。我试过传递不同的参数，比如self="。" 和self=""等。似乎没有什么能给我想要的重新加载。

我想念什么？

我还尝试从传递到服务方法的路由中挑选部分，但我只看到一堆可观察的，而不是实际的段。而且，当然，this.router.navigate(route)只会导致错误。

谷歌搜索产生了很多提示，其中包含大量不同的建议（例如this），这让我怀疑它可能严重依赖于版本（我使用的是 8.0），而且，许多建议虽然被接受了，从长远来看，可能会产生误导，更有害，而我没有意识到这一点。

我面临弃用方法的问题：

Chart.js:1990 bar chart: "scales.[x/y]Axes.maxBarThickness" is deprecated. Please use "dataset.maxBarThickness" instead

如何解决？

我正在使用以下方式动态设置条形图的 maxBarThickness

this.barOptions.scales.xAxes[0]['barPercentage'] = 0.8;

但这现在正在发出警告。

请分享您的建议！

我想在我的 angular8 应用程序中使用状态管理，在此之前我研究了状态管理库似乎是 NGRX、NGXS 和 akita。

但是我不知道该选择哪一个！

NGRS 最常用。

NGXS 有更多的可能性并且易于学习。

AKITA 使用较少，下载较少，根据 npm 下载历史和 github forked 和 issue，但它基于面向对象，易于学习。

你的选择是什么？请说出你的理由！

全部，

在实施身份验证保护之前，我能够在登录和注册屏幕中隐藏我的导航栏。通过读取 component.ts 中的路由事件并通过 ngIf 隐藏导航栏。在我实现了 auth guard 后，auth guard 到登录页面的路由没有隐藏下面的导航栏是我的代码..

在这里，我的 auth 守卫服务将检查用户是否通过 auth 服务（将从 cognito 获取数据）进行身份验证。现在，我怎样才能从 auth 守卫发生的路线中隐藏导航栏。请帮忙

应用程序组件.html

<app-toolbar *ngIf="isShowNavbar"   ></app-toolbar>

<router-outlet></router-outlet>

app.component.ts

import { Component,OnInit } from '@angular/core';
import {AuthorizationService} from "./authorization.service";
import { Router, ActivatedRoute, UrlSegment, NavigationEnd } from '@angular/router';
import { Observable } from 'rxjs';
import { first, distinctUntilChanged, throttleTime } from '../../node_modules/rxjs/operators';
@Component({
  // tslint:disable-next-line: component-selector
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {

  isLoggedIn$: Observable<boolean>; …

我正在运行时创建 Angular 代码，特别是，我使用 SVG 库来创建一个矢量图形，其中包含 Angular 代码指令，如(click)='myMethod()'，反过来，调用我在 SVG 封闭组件中静态定义的方法。在运行时生成我需要编译创建的模板并将其添加到组件中。我当时在这篇文章的帮助下用 Angular 3 实现了这样的代码，这篇文章非常繁琐。我尝试在 Angular 8 应用程序中复制旧代码：

private addComponent(template: string) {

    @Component({template: template + ' <div #target></div>'})
    class TemplateComponent {

      @ViewChild('target', {static: false, read: ViewContainerRef}) public target;

      constructor() {
      }

      public myMethod() {
        // do something     
      }
    }

    @NgModule({declarations: [TemplateComponent]})
    class TemplateModule {
      @ViewChild('target', {static: false, read: ViewContainerRef}) public target;
    }

    // ERROR in next line:
    const mod = this.compiler.compileModuleAndAllComponentsSync(TemplateModule);
    const factory = mod.componentFactories.find((comp) =>
        comp.componentType …

我正在执行命令

ng g interceptor error

其中 error 是拦截器的名称

但面临如下问题：

An unhandled exception occurred: Schematic "interceptor" not found in collection "@schematics/angular".

我们是否必须先安装任何软件包？

我在前端应用程序中使用 angular 8，但出现此错误：

无法读取未定义的属性“sortChange”

我尝试在我的数据表中添加分页（与服务器通信的分页）

代码组件：

        // Angular
    import { Component, ElementRef, OnInit, ViewEncapsulation, ViewChild, AfterViewInit } from '@angular/core';
    import { MatPaginator, MatSort } from '@angular/material';
    import { MatTableDataSource } from '@angular/material/table';
    import { PartnerService } from '../../../../core/partner/services/partner.service';
    import { PartnerDataSource } from '../../../../core/partner/services/partner.datasource.service';
    import { merge, Subscription } from 'rxjs';
    import { tap } from 'rxjs/operators';
    import { SelectionModel } from '@angular/cdk/collections';


    @Component({
        selector: 'kt-partner-list',
        templateUrl: './partner-list.component.html',
        encapsulation: ViewEncapsulation.None
    })
    export class PartnerListComponent implements AfterViewInit, OnInit {

        title = …