标签: angular7

我有一个组件，它是延迟加载模块的一部分。

有没有办法 matDialog.open() 和延迟加载模块并显示组件？

export class testComponent implements OnInit {
  constructor(
    public matDialog: MatDialog,
    private moduleLoader: NgModuleFactoryLoader
  ) {}
  ngOnInit() {}

  openModal() {
    this.moduleLoader
      .load("./modules/test-modal/test-modal.module#TestModalModule")
      .then((module: NgModuleFactory<any>) => {
        this.matDialog.open(/*insert component and load the module*/);
      });
  }
}

我只需要一个来自匹配整数的验证。因此我使用pattern带有正则表达式的验证器（见下文）。此外，该字段不应为空，因此我添加了required验证器。

但pattern错误永远不会被触发。我阅读了 angular 文档并查看了 的源代码，pattern但对我来说仍然没有意义。此外，我已经阅读了几乎所有与此主题相关的关于 stackoverflow 的问题。但我仍然无法弄清楚为什么该模式不起作用。

或许有大佬可以帮帮我，谢谢！

这是我的代码 component.ts：

// definition of the formcontrol
hours = new FormControl('', [
  Validators.required,
  Validators.pattern('^[0-9]*$'),
])

// for debugging
log() {
  console.log('required: ', this.hours.hasError('required'));
  console.log('pattern: ', this.hours.hasError('pattern'));
  console.log('Erros: ', this.hours.errors);
}

模板：

<mat-form-field>
  <input matInput [formControl]="hours" (input)="log()"
    placeholder="Anzahl der ausbezahlten Überstunden" type="number">
  <mat-error *ngIf="hours.hasError('required') && !hours.hasError('pattern')">
    Anzahl der Überstunden fehlt!
  </mat-error>
  <mat-error *ngIf="!hours.hasError('required') && hours.hasError('pattern')">
    Anzahl muss eine Ganzzahl sein!
  </mat-error>
</mat-form-field>

例子inputValue=""： …

我是 Angular 的新手，我正在尝试实现 api 调用，它在所有 api 的标头中发送令牌，所以我正在使用拦截器。

我无法在请求中设置标头。

jwt.interceptor.ts

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

@Injectable()
export class JwtInterceptor implements HttpInterceptor {
    constructor() { }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        let currentUser = localStorage.getItem('useremail')
        let currentUserToken = localStorage.getItem('token')
        if (currentUser && currentUserToken) {
            request = request.clone({
                setHeaders: {
                    'Authorization': `${currentUserToken}`
                }
            });
        }
        // console.log("Request", request)
        return next.handle(request);
    }
}

app.module.ts

import { BrowserModule …

我们的开发团队最近将一个 Angular 5 项目更新到了 Angular 7。我已经下载了 repo 并且我正在尝试构建源代码，但是当我运行ng build命令时，我在 No NgModule metadata found for 'AppModule' 中得到一个错误.

如果我运行ng --version命令，它会显示以下内容：

• 角 CLI：7.3.6
• 节点：11.10.0
• 操作系统：win32 x64
• 角度：7.2.10

该app.module.ts文件是：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AdminComponent } from './layout/admin/admin.component';
import { AdminComponent1 } from './layout/admin1/estimate.component';
import { AuthComponent } from './layout/auth/auth.component';
import { BrowserAnimationsModule …

我正在构建一个带有 angular 的小型 SPA，由于我是 angular 的新手，因此我将 angular 教程用作我的应用程序的路线图。一切正常，直到从 sqlite 数据库检索数据（由于实现限制，不可能使用任何其他类型的后端代码）。教程（https://angular.io/tutorial/toh-pt6）使用内存数据库，这显然不适合我。我想要从 sqlite 检索数据的服务并且可以注入到组件中

成分

   import { Component, OnInit } from '@angular/core';
   import { Areport } from '../../classess/areport';
   import { ReportService } from "../../services/report.service";
@Component({
  selector: 'app-daily-report',
  templateUrl: './daily-report.component.html',
  styleUrls: ['./daily-report.component.css']
})
export class DailyReportComponent implements OnInit {
  reports : Areport[];
  constructor(private reportService: ReportService) { }
  getReports(): void {
    this.reportService.getReports()
        .subscribe( reports => this.reports = reports)
  }
  ngOnInit() {
    this.getReports();
  }
}

报告服务

import { Injectable } from '@angular/core'; 
import …

我有一个表格，其中我将 ngx-select-dropdown 与 angular7 一起使用。在我的表单中选择选项是必需的。我想在提交表单时验证它。但是我的验证方法不适用于 ngx-select-dropdown 库，并且在 ngx-select-dropdown 的文档中我找不到任何有关验证的帮助信息。是否可以验证它？

 <ngx-select-dropdown (change)="onSelectDropdown($event)" name="unit" [config]="config"
[ngClass]="{ 'is-invalid': f.submitted && !unit.valid }"
[options]="unitsList"
[(ngModel)]="createUser.unit" id="unit" #unit="ngModel" required>
</ngx-select-dropdown>
<div *ngIf="f.submitted && !unit.valid" class="invalid-feedback">Unit is required</div>

我正在尝试在 Angular 7 中对查询参数值进行编码。但是当我的查询参数值包含任何特殊字符时，我得到 400 Bad Request 状态代码

失败的请求 URL： http://localhost/api/67/cardvalues?parentcardvalues=STONE&parentcardvalues=STONE%20AGE

但是，当我的查询参数值不包含任何特殊字符时，我得到 200 OK 状态代码。

请求成功地址： http://localhost/api/67/cardvalues?parentcardvalues=STONE&parentcardvalues=STONE

预期的请求 url 必须像 http://localhost/cardvalues?parentcardvalues=VALUE1&parentcardvalues=VALUE2

下面是我的代码，

parentcardvalues=["STONE","STONE AGE"]

let myparams = new HttpParams();

    if(parentcardvalues.length != 0)
       parentcardvalues.forEach((value) => { 

myparams = myparams.append( 'parentcardvalues',   encodeURIComponent(value) );

});

 this.http.get(this.baseUrl + 'api/67/cardvalues', {params: myparams});

Swagger 规范是，

卷曲

curl -X GET "http://localhost/api/cardvalues?parentcardvalues=STONE&parentcardvalues=STONE%20AGE" -H  "accept: application/json"

请求网址

http://localhost/api/cardvalues?parentcardvalues=STONE&parentcardvalues=STONE%20AGE

我在我的第一个 Angular 应用程序中构建了一个错误拦截器，这对我来说是全新的。当出现401响应代码时，拦截器会尝试刷新 Firebase 授权令牌。因此，我编写了以下代码：

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
constructor(private authService: AuthService, private alertService: AlertService) { }

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(
        catchError(err => {
            if (err.status === 401) {
                let user = localStorage.getItem('currentUser');
                if (!user) {
                    this.logout(false);
                    return throwError(err.error);
                }
                let currentUser = JSON.parse(user);
                if (!currentUser || !currentUser.stsTokenManager || !currentUser.stsTokenManager.accessToken) {
                    this.logout(false);
                    return throwError(err.error);
                }
                const reference = this;
                this.authService.getToken(currentUser, true).then(t => {
                    // How do I await and return this …

在文件 models/User.model.ts（见下文）中，我尝试设置一个方法 isEqual，如下面的代码所示。有人可以更正我的代码吗？

文件模型/User.model.ts：

export class User {
    constructor(
    public firstName: string,
    public lastName: string,
    ) {}

    isEqual (other : User): boolean {
    return other === this;
    }
}

文件服务/user.service.ts ：

import { User } from '../models/User.model';
import { Subject } from 'rxjs/Subject';

export class UserService {

    private users: User[] = [
    {
        firstName: 'William',
        lastName: 'Jones'
    },
    {
        firstName: 'John',
        lastName: 'Doe'
    }
    ];

...

services/user.service.ts(7,2) 中的错误：错误 TS2741：类型“{ firstName: string;”中缺少属性“isEqual”；lastName: string;}' 但在类型 'User' 中是必需的。

在子组件中发生事件后，我需要通过调用父组件中的函数来更新父组件中的一些数据。这里我的子组件位于父组件的路由器出口中

parentComponent.html:-

<div class="row">
     Parent component
</div>
<router-outlet></router-outlet>

父组件.ts：-

fetchRequestsStatus(role, user) {
if (this.userRole) {
  this.dashboardService.getStatusCount(role, user).subscribe(
    res => {
      console.log(res)
    },
    err => {
      console.log(err)
    })
}

}

现在在子级中单击按钮，我需要fetchRequestsStatus(role, user)通过从子级传递参数来调用函数。我已经看到@input @ output 装饰器用于共享数据，但这里我的子组件位于路由器内部。

我该如何处理？