小编kar*_*una的帖子

我想使用访问组件的DOM ViewChild.但是当我试图访问该nativeElement物业时,它就是undefined.

以下是片段.

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { AlertComponent } from './alert.component';

@Component({
    selector: 'app-root',
    template: `
    <app-alert #alert>My alert</app-alert>
      <button (click)="showAlert()">Show Alert</button>`
})
export class AppComponent implements AfterViewInit {
  @ViewChild('alert') alert;

  showAlert() {
    console.log('alert (showalert)', this.alert.nativeElement);
    this.alert.show();
  }

  ngAfterViewInit() {
    console.log('alert (afterviewinit)', this.alert.nativeElement);
  }
}

请看看插头.

我想在构建生产()时从我的REST API URL(例如,http:// localhost:8080)中删除我的本地服务器前缀ng build --prod.

我知道它与环境文件有关environment.prod.ts,但是找不到任何使用它们来实现上述内容的例子.

如果有人帮我开始会很棒!

我将导入的函数分配给组件属性constructor,以便在其中使用它template.

构建正确,但在我的编辑器(带有Angular语言服务的Visual Studio代码)中,显示以下错误.

下面是我导出的函数的代码.

export function downloadFile(fileUrl: string, fileName: string) {
    let a = document.createElement('a');
    a.href = fileUrl;
    a.download = fileName;
    a.click();
}

下面是我在组件中的代码.

import { downloadFile } from '../../shared/utilities';

@Component({
    ...
})
export class SomeComponent {
    downloadFile: any;

    constructor() {
        this.downloadFile = downloadFile;
    }
}

我无法理解为什么会出现此错误.请帮忙!

我一直在关注本教程,了解延迟加载,下面是我的推断.

场景1:通过将它们放在providers子模块的数组中来提供服务

场景2:使用该forRoot方法在子模块中提供服务

方案1在上下文中,

• 如果急切地加载子模块,则将该服务的实例添加到根注入器.
• 如果延迟加载子模块,则将服务的实例添加到根注入器,并将新服务实例添加到子注入器,这不是通常的用例.

在上下文中使用方案2

• 如果急切地加载子模块,则将该服务的实例添加到根注入器.

• 如果延迟加载子模块,则在根模块和子模块中都可以使用相同的服务实例,这是通常的用例.

他们提到了以下内容.

一开始,

因此,即使使用模块,也无法拥有"私有"服务,除非......模块正在延迟加载.

最后,

尽管此语法比原始语法更复杂,但它将保证我们只将一个CreditCardService实例添加到根模块.加载CreditCardModule(甚至延迟加载)时,不会将该服务的新实例添加到子注入器.

如果实例也将在根注入器中可用,那么他们如何表示该服务被"私有化"？

我糊涂了.有人请澄清一下.

我试图返回结果FileReader,我发现了这个实现.但由于它已经过时,我想知道如何使用ES6 Promises或Rx 实现相同的功能Observables.

下面是我的代码,参考上述链接,它按预期工作.

import { Injectable } from '@angular/core';
import * as XLSX from 'xlsx';
import * as XLS from 'xlsx';

@Injectable()
export class ExcelReaderService {

  constructor() { }

  importFromExcel(ev): JQueryPromise<any> {
    let deferred = $.Deferred();

    let regex = /^([a-zA-Z0-9\s_\\.\-:])+(.xlsx|.xls)$/;

    let workbook;
    let excelInJSON;

    if (regex.test(ev.target.files[0].name.toString().toLowerCase())) {
      let xlsxflag = false; /*Flag for checking whether excel is .xls format or .xlsx format*/
      if (ev.target.files[0].name.toString().toLowerCase().indexOf(".xlsx") > 0) {
        xlsxflag = true;
      }

      let …

我已将我的分页逻辑放在一个单独的模块中并将其导入AppModule. 下面是我的分页模块和AppModule.

分页实用程序模块：

import { NgModule, ModuleWithProviders, Injector } from '@angular/core';
import { CommonModule } from '@angular/common';
import { OrderByPipe } from './order-by.pipe';
import { FilterPipe } from './filter.pipe';
import { SortByDirective } from './sort-by.directive';
import { PaginationComponent } from './pagination/pagination.component';
import { ServiceLocator } from './service-locator';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    SortByDirective,
    PaginationComponent
  ],
  exports: [
    SortByDirective,
    PaginationComponent
  ]
})
export class PagingUtilitiesModule {
  constructor(private injector: Injector) {
    ServiceLocator.injector = this.injector;
  }

  static …

要知道请求是否已完成，我会这样做if (httpEvent instanceof HttpResponse)。同样，如何知道请求是否在 中被取消HttpInterceptor？下面是我的intercept功能。

intercept(httpRequest: HttpRequest<any>, httpHandler: HttpHandler): Observable<HttpEvent<any>> {
    this.requestsPending++;

    if (this.typeAheads.includes(httpRequest.url.split('/').pop()))
      this.slimLoadingBarService.start();
    else
      this.flsLoaderService.start();

    return httpHandler.handle(httpRequest)
      .do((httpEvent: HttpEvent<any>) => {
        if (httpEvent instanceof HttpResponse) {
          // decrementing counter on each request return
          this.requestsPending--;

          if (this.typeAheads.includes(httpEvent.url.split('/').pop())) {
            if (this.requestsPending === 0)
              this.slimLoadingBarService.complete();
          }
          else {
            if (this.requestsPending === 0)
              this.flsLoaderService.stop();
          }
        }
      }, () => {
        this.slimLoadingBarService.complete();

        // reset counter on error
        this.requestsPending = 0;
        this.flsLoaderService.stop();
      });
  }

我可以控制eslint --fix自动修复哪些规则吗？

我有多个规则，但我不希望在执行时修复所有可修复的规则eslint --fix。有没有办法在配置文件中指定它们？

我在提交处理程序（异步函数）中进行 API 调用。如果出现错误，我会显示警报，然后从 catch 块中重新抛出，以便 Sentry 等监控工具可以报告该错误。

要禁用该过程中的提交按钮，我使用formState.isSubmitting钩子返回useForm。我预计isSubmitting在解决或拒绝 Promise 的情况下会变成 false，但即使被拒绝它仍然是 true。

这是代码：https://codesandbox.io/s/axios-interceptor-react18-forked-89i3nq ?file=/src/App.js

我有一条指令，如果输入值是整数，则在模糊时附加小数。下面是实现。

import { Directive, ElementRef, Input, OnInit, HostListener, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Directive({
  selector: '[price]',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => PriceDirective),
      multi: true
    }
  ]
})
export class PriceDirective implements ControlValueAccessor {

  constructor(private el: ElementRef) { }

  // ControlValueAccessor interface
  private _onChange = (_) => { };
  private _onTouched = () => { };

  @HostListener('blur', ['$event'])
  input(event) {
    !!event.target.value ? $(this.el.nativeElement).val(Number(event.target.value).toFixed(2)) : $(this.el.nativeElement).val(null);

    this._onChange(parseFloat(event.target.value));
    this._onTouched();
  }
  writeValue(value: any): void { …

每当导航发生时，我想显示一个微调框。如何全局监听路由器事件，以便NavigationStart在NavigationEnd发生路由时可以显示Spinner 并隐藏它，就像我们如何处理HttpInterceptor全局拦截请求一样。

请给我一些建议。