标签: angular8

我正在尝试访问childView实例，但一直在说childView是未定义的。

这是我的childViews代码：

@ViewChild(CreateQuestionnaireComponent,{ read: true, static: false })  private childQuestionnaireDialog:CreateQuestionnaireComponent;
@ViewChild(ProjectNavbarComponent,{ read: true, static: false })  private childProjectNavBar:ProjectNavbarComponent;
@ViewChild(QuestionnaireNodeComponent,{ read: true, static: false }) private childQuestionnaireNode:QuestionnaireNodeComponent;
....

onCreateTerminal() {
        this.childQuestionnaireDialog.generateQuestionnaireDropDownList();
        this.childQuestionnaireDialog.resetFields();
        this._hideQuestionnaireDialog = false;
        this._modalTitle = 'New Terminal';
        this._placeHolderText = 'Terminal Questionnaire Title';
        this._terminal = true;
    }

...

它说：“ this.childQuestionnaireDialog未定义”。

它正在使用Angular 7。

根据我的新知识，@viewChild带有一个称为static的标志。如果将标记设置为true，则父组件将尝试在其自身创建期间获取对childView的引用。换句话说，我们可以在父Component的onInit（）方法中拥有childView的实例，基本上是一次访问，因为我们无法使用任何其他方法进行访问。

设置为false的标志基本上是常春藤渲染器中的新方法。

就我而言，这是一个问题，两个选项都不起作用。

我正在构建一个新的 Web 应用程序，即使没有互联网连接，它也需要无缝工作。我选择了 Angular 并且正在构建一个 PWA，因为它带有内置功能，可以使应用程序脱机工作。到目前为止，我让服务工作者完美地工作并由清单文件驱动，这很好地缓存了静态内容，并且我已将其设置为缓存一堆我想在应用程序离线时使用的 API 请求。

除此之外，我还使用 localStorage 来存储在用户离线时调用放置、发布和删除 API 请求的尝试。重新建立 Internet 连接后，存储在 localStorage 中的请求将发送到服务器。

在我的概念证明中，用户可以在离线时访问内容，编辑数据，一旦用户的互联网连接重新建立，数据就会与服务器同步。不过，这就是我的困境开始的地方。Service Worker 自动缓存了清单文件中定义的 API 请求数据，还有一个单独的数据存储用于离线时的数据编辑。这会导致用户编辑一些数据、保存数据、刷新页面并且数据由 Service Worker 缓存 API 提供服务。

是否有内置机制来更新 Service Worker 自动缓存的 API 数据？我不喜欢尝试手动解开它，因为它看起来很笨拙，而且我无法想象随着 Service Worker 的发展，它会成为未来的证明。

如果没有标准的方法来实现我需要做的事情，开发人员通过手动将离线数据全部存储在 IndexedDB/localStorage 来完全控制离线数据是否常见？即我可以调用 API 请求并编写一些代码，将结果以结构化格式缓存在 IndexedDB 中以形成离线数据库，然后在用户编辑某些数据时写回离线数据库，并在用户回来时上传任何数据编辑在线的。我不认为这样做会出现任何技术问题，似乎需要付出很多努力才能实现我希望成为标准功能的东西。

我对使用 Angular 进行开发还很陌生，但有多年的其他开发经验。因此，如果我问一些明显的问题，请原谅我，我似乎找不到一篇关于与服务工作者一起使用数据存储的最佳实践的好文章。

谢谢

在使用NgRX 8时，我和我的同事在实现效果时经常会遇到奇怪的错误消息。

类型'Observable <未知>'不可分配给类型'Observable <动作> | （（... args：any []）=> Observable <Action>）'

它与类型问题有关。消息如此具体，真是令人讨厌，它标志着完整的效果。这经常出现，而且确实很难解决。

我们想知道是否可以做些事情以便快速发现问题，或者我们是否能够以某种方式破坏消息的结构。我不是在这里寻找特定的解决方案，而是在寻找一种“如何快速确定问题出在哪里”的方法。

谢谢和欢呼！

可能性的集合

这是我们到目前为止所做的，也是来自评论和答案的想法。

• 在大多数情况下，动作可能不是问题
• switchMap参数的错误解构可能是错误的
• RxJS运算符之一未导入
• 服务中的参数和返回值错误可能是原因
• 服务和操作类型不一致也可能是原因
• 如果没有帮助，并且您确定没有问题，请执行以下操作：重新加载TypeScript

我们仍然希望有一个技巧来分解错误消息。

我有一个 Angular 8 前端代码。构建后，它在浏览器控制台中显示以下错误。

收到警告 sockjs.js:2998 WebSocket connection to 'ws://localhost:4200/sockjs-node/173/ypgvodsj/websocket' failed: WebSocket 在连接建立之前关闭。

WebSocketTransport.prototype.close = function() 
 {
  debug('close');
  var ws = this.ws;
  this._cleanup();
  if (ws) 
{
    ws.close();
 }
};

我有两个使用这些版本的Angular项目：

• 9.0.0-下一个6
• 8.1.0

在版本9中，我使用它来提供和注入window对象：

@NgModule({
  providers: [
    {
      provide: Window,
      useValue: window
    },
  ]
})

export class TestComponent implements OnInit {
  constructor(@Inject(Window) private window: Window)
}

哪个工作正常。

将这种方法用于版本8会在编译期间引发警告和错误：

警告：无法解析TestComponent的所有参数……

我通过使用单引号解决了它，如下所示：

@NgModule({
  providers: [
    {
      provide: 'Window',
      useValue: window
    },
  ]
})

export class TestComponent implements OnInit {
  constructor(@Inject('Window') private window: Window)
}

这两个版本有什么区别？
导致此问题的Angular 8和9有什么区别？

我正在尝试在自定义材料输入文本框中使用 ControlValueAccessor 应用错误验证样式。自从应用这个自定义组件以来，所有带有 formControlName/FormBuilders 的红色边框验证状态都不会显示，例如 required、minlength 等。它在 Angular Material 文本框上原生（开箱即用）工作，直到应用自定义控件。

目标是让自定义文本框与表单验证一起工作。这很自然地显示在 matInput 文本框上。

更新：已 发布答案；但是不确定它是否最有效，试图让 Saloo 的答案也能正常工作（如果有人可以发布 stackbliz，那就太好了），对任何更有效的选择开放

打字稿：

import { Component, OnInit, Input, ViewChild, EventEmitter, Output, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'app-input-textbox',
  templateUrl: './input-textbox.component.html',
  styleUrls: ['./input-textbox.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => InputTextboxComponent),
      multi: true
    }
  ]
})

export class InputTextboxComponent implements OnInit, ControlValueAccessor {
  @Input() MaxLength: string;
  @Input() Value: string;
  @Input() type: string;
  @Input() Label: string;
  @Input() PlaceHolder: …

我使用 Angular 8。

这个问题仅适用于 Angular DI 专家。

首先，我制作了一个 Angular 库，将在许多项目中重用。

在这个库中，我创建了一个抽象服务，必须在使用它的项目中定义该服务。

我在我的库中定义了一个名为 BridgeService 的抽象类

在我的主项目中，我创建了 BridgeService 来实现它：（在接下来的几行中，我将向您展示抽象的 BridgeService）

主要项目 > BridgeService :

import { BridgeService as AbstractBridgeService } from 'myLibrary';

@Injectable()
export class BridgeService implements AbstractBridgeService {

    hello(){
        alert('hello Word');
    }
}

主项目>用户模块：

import { UsersModule as LibraryUsersModule } from 'myLibrary';

@NgModule({
    imports: [
        CommonModule,
        LibraryUsersModule,
    ],
    //...
    providers: [
        BridgeService
        // some try:
        //{ provide: BridgeService, useClass: BridgeService }
    ],
})
export class UsersModule {

    constructor(private bridgeService: BridgeService){
        this.bridgeService.hello(); …

我正在尝试使用 RXJS 在 Angular 8 中使用 jest 创建单元测试。我想模拟商店。我正在使用https://ngrx.io/guide/store/testing使用模拟选择器的示例。谁能帮助我如何使用 MemoizedSelector 和 MockStore 独立使用模拟商店。

 this.store.select(homeState).pipe(select(s => s.checkStatus)).subscribe(status => {
     console.log(status);
     // We performation other action.
});

我在这个组件中有很多选择器。如何模拟许多选择器并更新每个测试用例的选择器值？

我的网络应用程序在后台播放 MP4 视频。但是，当我更新绑定并更改视频源时，视频保持不变

<video autoplay loop>
    <source [src]="videoSrc" type="video/mp4">
</video>
{{videoSrc}}

我的TS代码：

this.videoSrc = "video.mp4";
...
interval(10000).subscribe(x => {
  this.videoSrc = "otherVideo.mp4";
});

为什么绑定没有更新？

我正在尝试将Angular 6应用程序升级到Angular8。我的代码可以编译，但是我立即收到运行时错误“ d3.js：8 Uncaught TypeError：无法读取未定义的属性'document' ”。

d3.js中失败的行是var d3_document = this.document;。这使我相信Angular 8在严格模式下运行d3.js。我拥有d3节点模块的最新版本（“ d3”：“ 3.5.17”），它显然不支持严格模式；我的理解是“ this”应该引用窗口​​对象，但在严格模式下不起作用。

我知道Angular 8现在使用dart-sass而不是node-sass，这应该更严格。我确实尝试安装node-sass来代替dart-sass来使用它（如升级文档所推荐），但是我很确定这与sass无关。

我会注意到我的一些其他软件包需要更新，因为它们依赖于Angular 6的软件包，但是我看不到这将如何影响他的d3错误。

我也尝试"noImplicitUseStrict": false,在tsconfig.json文件中明确说，但收到相同的错误。我也"noImplicitUseStrict": true,没有运气尝试过。

我已引用此堆栈溢出帖子，该帖子解决了相同的错误：D3.js：未捕获的TypeError：无法读取undefined的属性“ document”，以及所引用的解决方案：https : //stackoverflow.com/questions/33821312/how-to-删除全局使用限制，按babel添加；但是我很难将这些应用到我的情况上，因为我正在使用Angular项目，并且不确定babel是否适用或如何修改babel选项。

完全错误：

d3.js:8 Uncaught TypeError: Cannot read property 'document' of undefined
    at d3.js:8
    at Object../node_modules/d3/d3.js (d3.js:9554)
    at __webpack_require__ (bootstrap:83)
    at Module../dist/core-services/fesm2015/core-services.js (core-services.js:1)
    at __webpack_require__ (bootstrap:83)
    at Module../src/app/app.component.ts (main-es2015.js:22262)
    at __webpack_require__ (bootstrap:83)
    at Module../src/app/app.module.ts (app.component.ts:21)
    at __webpack_require__ (bootstrap:83)
    at Module../src/main.ts (main.ts:1)
(anonymous) @   d3.js:8
./node_modules/d3/d3.js …