标签: 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 中预设的规则，简单的重命名是不可能的。

我想测试 .get 的 get 和 set 方法my user.store.ts。我有一个get()用于获取users和addUsers()用于将用户添加到BehaviourSubject. 我怎样才能做到这一点？

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { User } from 'ngx-login-client';

@Injectable({
  providedIn: 'root'
})

export class UserStore {

  private _users: BehaviorSubject<User[]> = new BehaviorSubject([]);

  get users() {
    return this._users.asObservable();
  }

  addUsers(users: User[]) {
    this._users.next(users);
  }
}

我希望输出是在addUsers()调用时添加的值，并且get在调用时可以添加用户。我get users()是 Angular 测试的新手。

得到类似的错误：

Expected Observable({ _isScalar: false, source: BehaviorSubject({ …

我正在尝试从 ngx-translate 迁移到 Angular i18n 方法，并希望在迁移前确定几点。

1. 是否可以在没有任何模板的情况下在服务和组件内部进行翻译？在 ngx-translate 中，可以使用翻译管道。
2. angular 是否为 V7 引入了任何方法或计划在 v8 中引入用于转换内部组件和服务级别的方法？
3. 这目前是否只能使用变通方法并且没有角度的方法来做到这一点？如果是，我应该使用 angular i18n 方法还是更好地继续使用ng-tranlate包？

提前致谢！

我们已经使用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>

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