标签: angular11

FlexLayoutModule当我遇到此错误时，我已经安装并声明了它：

Error: node_modules/@angular/flex-layout/typings/module.d.ts:16:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.

This likely means that the library (@angular/flex-layout/typings/module) which declares FlexLayoutModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

16 …

我想在 Angular 11 中订阅 NavigationEnd 事件，同时使用 rxjs 中的过滤器。

subscribe((event: NavigationEnd) ...导致以下问题的部分

目前的解决方案：

\n

TS2769：没有与此调用匹配的重载。\xc2\xa0\xc2\xa0Overload 1 of 5, '(observer?: NextObserver | ErrorObserver | CompletionObserver | undefined): Subscription'，给出以下错误。\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0 类型“(event: NavigationEnd) => void”的参数不可分配给类型“NextObserver |”的参数 错误观察者 | 完成观察者 | 不明确的'。\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0 类型“(event: NavigationEnd) => void”中缺少属性“complete”，但类型“CompletionObserver”中需要该属性。\xc2\xa0\xc2\xa0Overload 2 of 5, '(下一个？: ((值: 事件) => void) | 未定义，错误？: ((错误: 任何) => void) | 未定义，完整？: ( () => void) | undefined): 订阅'，出现以下错误。\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0类型“(event: NavigationEnd) => void”的参数不可分配给类型“(value: Event) => void”的参数。\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0参数'event'和'value'的类型不兼容。\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0Type“Event”不可分配给类型“NavigationEnd”。\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0 类型“RouterEvent”中缺少属性“urlAfterRedirects”但在“NavigationEnd”类型中需要。

\n

请参阅下面的构造函数代码以及提到的代码片段：

export class …

I added Angular Material to my project using Angular-CLI. I selected the Purple/Green pre-built theme. According to the preview of the theme, the background color should be dark. But my background color still white. Why doesn't my background color change to dark? Any solution?

我想测试将我发送到特定页面的方法。我检查了几个示例，所有示例都以与我相同的方式完成，但我收到错误：

预期间谍导航已被调用： [ '/themen' ] 但它从未被调用。错误：预期间谍导航已被调用：[ '/themen' ] 但它从未被调用。

我的html代码是：

<button class="arrow-back-icon kf-tooltip-btn align-middle" id="backButton"
         tabindex="0" name="ic_arrow-back_24" (click)="goBack()">
</button>

我的组件中的方法是：

import {AfterViewChecked, ChangeDetectorRef, Component, OnInit} from '@angular/core';
import {TranslateService} from '@ngx-translate/core';
import {SharingDataService} from '../services/sharing-data.service';
import {ActivatedRoute, Router} from '@angular/router';
import {BreakpointObserver} from '@angular/cdk/layout';
@Component({
  selector: 'app-meeting',
  templateUrl: './meeting.component.html',
  styleUrls: ['./meeting.component.scss']
})
export class MeetingComponent implements OnInit, AfterViewChecked {
  constructor(private readonly translate: TranslateService,
              private readonly sharingDataService: SharingDataService,
              private readonly router: Router,
              private readonly activatedRoute: ActivatedRoute,
              private readonly breakpointObserver: BreakpointObserver,
              private …

我有一个手动调整大小的组件，因此我添加了一个侦听器：

@HostListener('window:resize')
  public detectResize(): void {
    // get height and width of the component
    this.theHeight = // the coponent height
    this.theWidth = // the coponent height
  }

 theHeight = '';
 theWidth = '';

如何获取组件的高度和宽度？

我正在练习 Angular JWT 身份验证和授权。这是我的auth.interceptor.ts文件：

import { HTTP_INTERCEPTORS, HttpEvent } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { HttpInterceptor, HttpHandler, HttpRequest } from "@angular/common/http";
import { Observable } from "rxjs";

import { TokenStorageService } from "../services/token-storage.service";


const TOKEN_HEADER_KEY = "Authorization";

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
    
    constructor(private token:TokenStorageService) { }

    intercept(req: HttpRequest, next:HttpHandler): Observable<any> {
        let authReq = req;
        const token = this.token.getToken();
        if (token != null) {
            authReq = req.clone({ headers: req.headers.set(TOKEN_HEADER_KEY, 'Bearer' + token) …

我正在使用 Angular 11 并尝试使用短导入import {smthg} from '@common'而不是import {smthg} from '../../../common'

但我总是在 IDEA 中遇到错误： TS2307: Cannot find module '@common' or its corresponding type declarations.

尝试编译 .ts 文件时在控制台中出现同样的错误 ( ng serve)

有趣的是，当我添加/index到导入时，然后IDEA停止诅咒，但错误并没有在控制台中消失

myAngularProject
?   package.json
?   tsconfig.json
?   tsconfig.app.json
?   angular.json    
?
????src
    ?   main.ts
    ?   index.html
    ?
    ????app
        ?  
        ????common
        ?
        ????features

tsconfig.json：

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@common/*": ["app/common/*"],
      "@features/*": …

我在 Angular 项目中有自定义 Mat Auto Complete。它有 2 个后缀：清除按钮和下拉按钮。当我单击清除按钮时，代码this.myControl.reset('', { emitEvent: true });会重置输入值。但下拉面板打不开。我尝试使用以下格式但没有成功

1. this.myControl.reset();
2. this.myControl.reset（''，{emitEvent：true}）；
3. this.myControl.patchValue('');

StackBlitz 演示

自动完成显示示例.ts

.......

 clearInput() {
    this.arrowIcon = "arrow_drop_down";
    this.myControl.reset('', { emitEvent: true });
  }

......

自动完成显示示例.html

<form class="example-form">
 <mat-form-field class="example-full-width">
   <mat-label>Assignee</mat-label>
   <input
     type="text"
     matInput
     [formControl]="myControl"
     [matAutocomplete]="auto"

   />
   <div matSuffix style="display:flex">
     <button
       *ngIf="myControl!==undefined && myControl.value!==null && myControl?.value!==''"
       mat-icon-button
       aria-label="Clear"
       (click)="clearInput()"
       type="button"
     >
       <mat-icon>clear</mat-icon>
     </button>

     <button mat-icon-button aria-label="Clear" type="button">
       <mat-icon>{{arrowIcon}}</mat-icon>
     </button>
   </div>

   <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" (opened)="arrowIcon='arrow_drop_up'"
     (closed)="arrowIcon='arrow_drop_down'" (optionSelected)="arrowIcon='arrow_drop_down'">
     <mat-option *ngFor="let option of filteredOptions | …

我正在以这种方式使用父表单和子组件表单。/sf/answers/4151721101/

当父表单提交了按钮 Ng 时，如何让子组件知道？ParentForm 变量在子组件中作为变量。有没有办法，我可以将parentFormGroup 作为一个事件来告诉我？

当子窗体知道时，我想计算一些复杂的值（不在窗体中），并将它们发送到父组件。

父组件：

 ngOnInit() {
    this.parentForm = this.fb.group({
       'customerName': [null, [Validators.required]],
       'phoneNumber': [null, [Validators.required]],
    })

 <form [formGroup]="parentForm" (ngSubmit)="onSubmit()">
    <app-child [form]="parentForm"></app-child>
    <button type="submit">Purchase</button>
 </form>

子组件：

需要知道在这个组件中，parentForm 是什么时候提交的。

@Input() parentForm: FormGroup;

ngOnInit() {
    this.parentForm.addControl('address', new FormControl(Validators.required));
    this.parentForm.addControl('city', new FormControl(Validators.required));
 }

当我尝试获取本地存储记录时，它给出以下错误。

"Argument of type 'string | null' is not assignable to parameter of type 'string'.\n  Type 'null' is not assignable to type 'string'.",

这是代码

this.service.getAllPets(this.CatDog).subscribe(
  data => {
    this.pets = data;
    console.log(data);
    // tslint:disable-next-line:no-bitwise
    const newPet = JSON.parse(localStorage.getItem('newPet'));
    if (newPet){
      this.pets = [newPet, ...this.pets];
    }
    console.log(this.route.snapshot.url.toString());
  }, error => {
    console.log('httperror:');
    console.log(error);
  }
);

我正在使用材料 UI 和反应形式。我的应用程序运行正常，我能够登录，但在我的终端窗口中，我收到错误 TS2531：对象可能为“空”。我附上了下面的错误屏幕截图以供参考，以及我的登录 html 模板和组件。

我的 login.component.html 代码是

<div class="example-container">
  <div class="form-container">
    <form [formGroup]="loginForm" (submit)="onSubmit()">
      <mat-form-field class="form-field" appearance="outline">
        <mat-label> E-mail
        </mat-label>
        <input matInput formControlName="email" required>
        <mat-error *ngIf="loginForm.controls.email.touched && loginForm.controls.email.invalid">
          <span *ngIf="loginForm.controls.email.errors.required">This field is mandatory.</span>
          <span *ngIf="loginForm.controls.email.errors.pattern">This field is invalid.</span>
        </mat-error>
      </mat-form-field>
      <mat-form-field class="form-field" appearance="outline">
        <mat-label> Password
        </mat-label>
        <input matInput formControlName="password" type="password">
        <mat-error *ngIf="loginForm.controls.password.touched && loginForm.controls.password.invalid">
          <span *ngIf="loginForm.controls.password.errors.required">This field is mandatory.</span>
        </mat-error>
      </mat-form-field>
      <button mat-raised-button color="primary" type="submit">Log In</button>
    </form>
  </div>
</div>

我的 login.component.ts 代码是

import { Component, OnInit } from …

我是角度新手。

执行后ng add ngx-spinner，我遇到了这个错误：

错误（ngx-spinner）：

您尝试添加的包不支持原理图。您可以尝试使用不同版本的包或联系包作者以添加 ng-add 支持。

我怎么解决这个问题？（如何手动添加模块？）