标签: angular8

Angular 8 为网络工作者添加了更好的支持。我没有运气让它工作。有人知道我做错了什么吗？

这是我遵循的官方指南。

使用此 cli 命令，我生成了 Web Worker：

ng generate webWorker my-worker

cli 生成了 my-worker.worker.ts 文件和 tsconfig.worker.json 文件，并更新了以下文件：angular.json、tsconfig.app.json。

在此之后，我收到以下错误：

ERROR in node_modules/typescript/lib/lib.dom.d.ts(25,1): error TS6200: Definitions of the following identifiers conflict with those in another file: EventListenerOrEventListenerObject, BlobPart, HeadersInit, BodyInit, RequestInfo, DOMHighResTimeStamp, CanvasImageSource, MessageEventSource, ImageBitmapSource, TimerHandler, PerformanceEntryList, VibratePattern, AlgorithmIdentifier, HashAlgorithmIdentifier, BigInteger, NamedCurve, GLenum, GLboolean, GLbitfield, GLint, GLsizei, GLintptr, GLsizeiptr, GLuint, GLfloat, GLclampf, TexImageSource, Float32List, Int32List, BufferSource, DOMTimeStamp, FormDataEntryValue, IDBValidKey, Transferable, BinaryType, ClientTypes, EndingType, IDBCursorDirection, IDBRequestReadyState, IDBTransactionMode, KeyFormat, …

我将我的 angular 项目升级到 angular 8，现在当我输入时

ng serve

我收到此错误：

错误：找不到 builder @angular-devkit/build-angular:dev-server 的实现

对于我使用的升级ng update。当我打字

ng update

我得到：

使用包管理器：'npm'

正在收集已安装的依赖项...

找到 41 个依赖项。

我们分析了您的 package.json，一切似乎都井井有条。干得好！

我需要在Angular 8的项目中创建一个组件，我尝试了以下命令：

ng g c prueba

但它返回错误为：

检测到无效的格式版本-预期：[1]找到：[3]

你能帮我解决吗？

是否有任何选项可以防止 angular 8 的新功能为旧浏览器划分包？因为构建需要两倍的时间，非常长。

我正在使用此命令ng update @angular/cli @angular/corefor将角度版本从 6 更新到 8，但它显示了以下问题。

Package "@nguniversal/module-map-ngfactory-loader" has an incompatible peer dependency to "@angular/core" (requires ">=7.0.0-rc.0 <8.0.0||>=6.0.0-rc.0 <7.0.0", would install "8.2.5").
Package "@nguniversal/module-map-ngfactory-loader" has an incompatible peer dependency to "@angular/common" (requires ">=7.0.0-rc.0 <8.0.0||>=6.0.0-rc.0 <7.0.0", would install "8.2.5").
Package "@nguniversal/module-map-ngfactory-loader" has an incompatible peer dependency to "@angular/platform-server" (requires ">=7.0.0-rc.0 <8.0.0||>=6.0.0-rc.0 <7.0.0", would install "8.2.5").

发现不兼容的对等依赖项。看上面。

如何在 Angular 中创建月和日日期选择器，不包括隐藏年份？

此以下链接将执行月份和年份选择器。我试图操纵它，做月和日。用 DD 替换 YYYY 不起作用。

闪电战：

https://stackblitz.com/angular/gxymgjpprdy?file=src%2Fapp%2Fdatepicker-views-selection-example.ts

来自 Stackblitz 的真实代码：

打字稿：

import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';
import {MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS} from '@angular/material-moment-adapter';
import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';
import {MatDatepicker} from '@angular/material/datepicker';

// Depending on whether rollup is used, moment needs to be imported differently.
// Since Moment.js doesn't have a default export, we normally need to import using the `* as`
// syntax. However, rollup creates a synthetic default module and we thus need …

如何ng build project在不编辑 angular.json 的情况下修复in angular

这是错误

Your global Angular CLI version (8.3.16) is greater than your local
version (8.1.3). The local Angular CLI version is used.

To disable this warning use "ng config -g cli.warnings.versionMismatch false".

chunk {0} runtime-es2015.52e4031f7f0d4c5547f5.js (runtime) 2.25 kB [entry] [rendered]
chunk {1} main-es2015.4e8665ff7ceef4e442ee.js (main) 4.62 MB [initial] [rendered]
chunk {2} polyfills-es2015.556027bb8b3cb9b5932e.js (polyfills) 173 kB [initial] [rendered]
chunk {3} styles.26e824d23ac01d2a1ba0.css (styles) 695 kB [initial] [rendered]
chunk {4} 4-es2015.823687dfc617d3f0d9c2.js () 3.43 kB  [rendered]
chunk {5} …

我正在尝试实现一个控件，使用

 <input type="time"/>

或只是与

  <input type="text"/>

并实现一个持续时间选择器控件，该控件的小时格式可以超过 24，例如 000:00:00 或 hhh:mm:ss，并且没有 am/pm 选项（时间的默认输入类型具有 am/pm 格式的格式，这在我的情况下没有用）。要求是能够使用向上和向下键增加减少持续时间，就像 HTML 的默认输入类型时间一样。

是否有任何本机HTML、angular或材料组件？或者有没有办法使用正则表达式/模式或其他东西来实现这一点？

背景：单击按钮后，我的主页会打开项目中另一个模块的外部窗口（相同来源）。我还设置了一个 BroadcastChannel 以便这两个窗口现在可以通信。现在，如果此窗口已打开并且用户再次单击触发按钮，我想将此信息传达给窗口：

onAddNewFieldClick() {
    if (this.window === null) {
      this.window = window.open(window.location.origin + '/wizard', 'Field Wizard', 'resizable,scrollbar');
      this.channel = new BroadcastChannel('edit-spec-wizard-channel');
    } else {
      this.channel.postMessage(1);
    }
  }

新窗口侦听此通道并将消息数据附加到 ngFor 中使用的数组。为了更加安全。每次推送新值以导致重新绑定时，我都会继续创建一个全新的数组。这是在新窗口中为组件供电的逻辑。

export class EntryComponent implements OnInit, OnDestroy {

  newFieldChannel: BroadcastChannel;
  newFields: number[] = [];
  constructor() { }

  ngOnInit() {
    this.newFieldChannel = new BroadcastChannel('edit-spec-wizard-channel');
    this.newFieldChannel.onmessage = this.newFieldChannelOnMessage.bind(this);
    this.newFields.push(1);
  }

  func() {
    this.newFields.push(1);
    this.newFields = this.newFields.slice();
  }

  private newFieldChannelOnMessage(event: MessageEvent) {
    this.newFields.push(event.data as number);
    this.newFields = this.newFields.slice();
  }

  ngOnDestroy() {
    this.newFieldChannel.close();
  } …

我正在尝试使用 angular 中的正则表达式来验证电话号码

HTML 内容

<div class="form-group row">
                <input type="text" class="form-control" appPhoneMask placeholder="Mobile Number" autocomplete="off"
                    [ngClass]="{ 'is-invalid': (f.inputCountryCode.errors && mobileNumberform.submitted) }"
                    formControlName="inputCountryCode">
                <div *ngIf="(f.inputCountryCode.invalid ) || (f.inputCountryCode.invalid && (f.inputCountryCode.dirty || f.inputCountryCode.touched))"
                    class="invalid-feedback">
                    <div *ngIf="f.inputCountryCode.errors.required">This field is required.</div>
                    <div *ngIf="f.inputCountryCode.errors.pattern">Invalid phone number.</div>
                </div>
            </div>

TS代码

 this.$form = this.$builder.group({
      selectCountryCode: [null, Validators.required],
      inputCountryCode: [null, [Validators.required, Validators.pattern("[0-9 ]{12}")]]
    });

验证模式应该允许带空格的数字，因为我使用的是电话号码屏蔽，它在 3 位数字后添加了空格。

该模式不起作用，不断让电话号码验证为假

Angular 4 手机号码验证

允许数字和空格的字段的正则表达式

屏蔽指令

export class PhoneMaskDirective {

  constructor(public ngControl: NgControl) { }

  @HostListener('ngModelChange', ['$event'])
  onModelChange(event) {
    this.onInputChange(event, false); …