标签: angular7

我最近将我的 Angular 4 应用程序升级到了 Angular 6，现在想升级到 Angular 7。根据下面的文章，运行以下命令的时间不应超过 10 分钟来升级。

ng 更新 @angular/cli @angular/core

https://blog.angular.io/version-7-of-angular-cli-prompts-virtual-scroll-drag-and-drop-and-more-c594e22e7b8c

运行此命令后，我在命令提示符下看不到任何事情发生。没有错误。有人能告诉我为什么会这样吗

我必须在我的 Angular 7 项目中显示/下载一个 .pdf 文件，但我在使用 window.URL.createObjectURL 时遇到了一些问题。这是我做的：

this.userService.getFile(report.id).subscribe(
  res => {
    console.log(res)
    const filename = res.headers.get('content-disposition').split(';')[1].split('=')[1].replace(/\"/g, '')
    const blob = new Blob([res.body], { type: res.body.type })
    const url = window.URL.createObjectURL(blob)
    const a: HTMLAnchorElement = document.createElement('a') as HTMLAnchorElement

    a.href = url
    a.download = filename
    window.document.body.appendChild(a)
    a.click()
    window.document.body.removeChild(a)
    URL.revokeObjectURL(url)
  },
  err => {
    console.log(err)
  }

其中 getFile() 是一个简单的 http 请求

getFile(fileId: string): Observable<any> {
   return this.http.get(environment.API_URL + '/file/' + fileId, {observe: 'response', responseType: 'blob'})
}

我的 IDE 还在 window.URL 上触发了“实例成员不可访问”。createObjectURL …

我最近更新到Angular 7。

我正在处理延迟加载模块，但是#chunk.js当我单击延迟加载模块中的组件时，我在网络选项卡中看不到任何地方。

联系我们延迟加载组件，但#chunk.js网络选项卡中没有。

这是我如何懒惰地加载我的模块。

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { ContactUsComponent } from 'src/app/modules/contactus/contactus.component';
import { ErrorComponent } from 'src/app/modules/error/error.component';
import { ContactUsRoutingModule } from 'src/app/modules/contactus/contactus-routing.module';
import { LandingComponent } from 'src/app/modules/landing/landing.component';
import { AboutUsComponent } from 'src/app/modules/aboutus/aboutus.component';

const routes: Routes = [
  { path: '', redirectTo: 'landing', pathMatch: 'full' },
  { path: 'landing', component: LandingComponent },
  { path: 'aboutus', component: AboutUsComponent }, …

我有一个角度反应形式，提交时我有这个代码：

(ngSubmit)="addVideo(); addVidForm.reset();"

我正在标记我的主要表格 #addVidForm

我还有一些自定义验证器/控件，它们与我拥有的另一种表单相比很特别，在重置表单时不会发生这种情况。

我的验证器如下：

 static mustBeVimeo(control: AbstractControl) : ValidationErrors | null {

        if((control.value as string).startsWith("https://vimeo.com/")){ return null } else
        if((control.value as string).startsWith("http://vimeo.com/")){ return null }
        else { return { mustBeVimeo : true } }

}

这是我在后端的表单：

this.addVideoForm = new FormGroup({
      title: new FormControl('', [Validators.required, Validators.minLength(3), Validators.maxLength(50)]),
      description: new FormControl('', [Validators.required, Validators.minLength(5), Validators.maxLength(200)]),
      category: new FormControl('', [Validators.required]),
      link: new FormControl('', [Validators.required, AddVideoValidators.mustBeVimeo, Validators.maxLength(100)]),
      visibleToGuests: new FormControl(this.visibleToGuests, [Validators.required])
    })

我还做了一个函数，它只是在后端重置表单并用一个按钮调用它，我得到了同样的错误。

不完全确定这整个事情的哪一部分失败了。该字段是正常输入，就像我在其他地方使用的一样。

是否可以将 Angular 7（使用 CLI 7.x）项目配置为使用默认后缀以外的类名后缀？

更具体地说，对于表示对话框的类，我想Dialog在最后使用，而不是DialogComponent，这会不必要地长。对于代表我想要使用的页面的类Page，而不是PageComponent.

例子：

• 使用LoginDialog代替LoginDialogComponent
• 使用MainPage代替MainPageComponent

由于tslintAngular 中预设的规则，简单的重命名是不可能的。

我需要有关我无法解决的问题的帮助。我正在研究 angular 7 库，以便为我的应用程序添加模块化，但是在应用程序中安装它时，库中定义的模块路由似乎不起作用。

我已经创建项目到 github 来重现问题：
Library test foo-lib
External Application foo-tester

在每个自述文件中，我都描述了如何重现此问题。

我创建了一个示例库 (foo-lib)，其路由模块定义了子路由，然后我在同一工作区中的一个简单应用程序中构建并测试了它。一切正常，并且库路由已正确添加到测试应用程序中。在下一步中，我导出了构建的库，并通过 npm link 命令将其包含在另一个工作区中的另一个应用程序示例中，并在此应用程序上运行了 ng serve 命令。使用此配置，如果尝试实现库路由路径，我会收到一个错误，就好像它们没有添加到主路由模块中一样。

Foo-lib-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { MainComponent } from './components/main/main.component';
import { NewFooCmpComponent } from './components/new-foo-cmp/new-foo-cmp.component';

const UP_ROUTES: Routes = [
  { path: 'main_path',  component: MainComponent,
    children: [
      { path: 'child', component: NewFooCmpComponent }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(UP_ROUTES)],
  exports: [RouterModule]
})

export class FooLibRoutingModule { } …

我正在尝试自定义角度材料 mat-form-field ：我能够使用以下方法自定义下划线边框：

::ng-deep.mat-form-field-ripple {
  background-color: yellow;
}

现在我正在尝试将禁用状态下的下划线边框自定义为实线而不是虚线：

我试过这个，但它对下划线不起作用：

::ng-deep.mat-form-field-disabled
 {

 }

我希望它在禁用状态下呈灰色实心

 <mat-form-field>
    <input matInput placeholder="Input" [disabled]='true'>
  </mat-form-field>

我们已经使用Angular 材质的自动完成功能创建了一个组件。为了显示选项，我们遍历了一个包含 51 个对象的数组。我正在将 CSS 类应用于已选择的选项。该isAccountingTypeSelected方法确定选项是否被选中或没有。该方法被调用51*28 = 1428 次。我似乎不明白原因？它应该只被调用51 次，不是吗？

<mat-form-field class="full-width">
  <input type="text" matInput #autoCompleteInput [formControl]="autocompleteForm" [matAutocomplete]="auto" placeholder="Choose Accounting Type" aria-label="Number">

  <span matSuffix class="close-icon hover" *ngIf="autoCompleteInput.value" (click)="clearAll($event)"></span>
  <span matSuffix class="arrow-drop-down-icon hover" (click)="openPanel()"></span>

  <mat-autocomplete #auto="matAutocomplete" (optionSelected)="accountingTypeSelected($event)">
    <mat-option *ngFor="let accountingType of filteredAccountingTypes | async" [value]="accountingType.code">
      <span class="accounting-type-options" [class.selected]="isAccountingTypeSelected(accountingType.code)">
        {{ accountingType.name + ' (' + accountingType.code + ')' }}
      </span>
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

isAccountingTypeSelected(code: string): boolean {
  console.log('I …

我正在尝试在运行时更改我的 angular 应用程序中的 Locale_Id，但必须用于window.location.reload()在语言环境中触发更改。

我想在不重新加载我的应用程序的情况下更改语言环境。

这是我的代码：

应用模块

import { LOCALE_ID } from '@angular/core';
import { LocaleService} from "./services/locale.service";

@NgModule({
    imports: [//imports],
    providers: [
        {provide: LOCALE_ID,
         deps: [LocaleService],
         useFactory: (LocaleService: { locale: string; }) => LocaleService.locale
        }
    ]})

语言环境服务

import { Injectable } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import localeEnglish from '@angular/common/locales/en';
import localeArabic from '@angular/common/locales/ar';

@Injectable({ providedIn: 'root' })
export class LocaleService{

    private _locale: string;

    set locale(value: string) {
        this._locale = value;
    }
    get locale(): …

我想根据下拉列表中的选定值生成输入文本框。

<mat-label>Options</mat-label>
<mat-form-field>
 <select matNativeControl name="Options" required>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
 </select>
</mat-form-field>

就在这个选择框之后，一些输入字段应该按照选定的数字出现。