我在我的Angularv5应用程序中使用@ngrx/router-store我最近开始遇到一个错误:( Navigation ID X is not equal to the current navigation id Y其中X和Y是整数).

这个问题一直发生,当我浏览来路由来自特定路由B.从任何其他途径向导航路线A似乎很好地工作.

我发现的与此相关的唯一其他SO问题提供了可能由于多次快速更新导航而导致问题的可能性.为了测试这是否发生(它不应该),我订阅了我的根组件内的路由器导航事件,在订阅中设置了一个断点,并打开了一个调试会话来逐步解决问题.这样做,我可以看到

1. 假设当前导航ID为11.当我导航到问题路径时,路由器开始导航,成功执行包括的每个导航事件NavigationEnd,然后立即@ ngrx/router-store抛出一个'ROUTER_CANCEL'操作,说明:Navigation ID 12 is not equal to the current navigation id 13.据我所知,12是正确的导航ID(同样,导航ID 11完成并立即'ROUTER_CANCEL'抛出,而路由器不会发出任何进一步的导航事件).此外,'ROUTER_CANCEL'操作有效负载包含导致问题的路由器导航事件,以及导致问题时的存储状态.导致问题的事件的ID为12,当时商店中的路由器状态的ID为11.因此,12似乎是正确的导航ID,不应该抛出错误.

2. 在从问题路径导航到用户配置文件路由时,在@ ngrx/router-store取消导航之前不会发生其他导航.(即我没有快速更新导航路线)

3. 除了ngrx调度'ROUTER_CANCEL'操作之外,不报告任何错误(并且不会抛出任何错误).

再次,遇到问题的路线工作正常,除非从特定路线B开始导航.据我所知,这条特定路线B没有任何不同或不同寻常的问题(问题路线也不关心人们来自何处 - 这两条路线彼此没有关联).

最后一两件事:触发错误调试会话之外似乎总是在形式造成的错误Navigation ID X is not equal to the current navigation id X+1,但是引发了调试会话中的错误可能导致Navigation ID 11 is not equal to the current navigation id 15 …

我在Angular组件中使用matInput和mat-form-field(@ angular/material),我无法禁用matInput.

这里可以看到一个工作的例子.

我似乎错过了一些明显的东西,但对于我的生活,我无法弄清楚是什么.这是一个错误吗？

如果我[formControlName]从中删除CustomFormInputComponent,那么我可以成功禁用matInput

CustomFormInputComponent:

import { Input, Component } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
  selector: 'app-custom-form-input',
  template: `
    <mat-form-field [formGroup]="form">
      <input matInput placeholder='Name' [formControlName]="formControlName" [disabled]='disabled'>
    </mat-form-field>
  `,
})
export class CustomFormInputComponent  {
  @Input() form: FormGroup;
  @Input() formControlName: string = 'name';
  @Input() disabled = false;
}

AppComponent:

import { Component } from '@angular/core';
import { FormBuilder } from '@angular/forms';

@Component({
  selector: 'my-app', …

在 rxjs 流中，我使用distinctUntilChangedlodashisEqual来过滤掉重复值。但是，它似乎没有按预期工作。取下面的代码片段

import { isEqual } from 'lodash-es';

let cachedValue: any;

function testFn(observableVal: Observable<any>) {
  return observableVal
    .pipe(
      distinctUntilChanged(isEqual),
      tap(val => {
        const equal = isEqual(cachedValue, val);
        console.log('"output":', equal, cachedValue, val);
        cachedValue = val;
      })
    )
}

在这个例子中，我希望函数const equal内部tap永远不会=== true. 我希望这distinctUntilChanged(isEqual)会过滤掉任何值，其中isEqual(cachedValue, val) === true-->const equal === false总是意味着。但是，控制台输出显示：

"output": false undefined [ContactList]
"output": true [ContactList] [ContactList]
"output": true [ContactList] [ContactList]
"output": true …

我正在尝试使用TransferState我的Angular Universal v5应用程序.经过大量的调试后,我意识到,在服务器上,TransferState似乎正在工作,因为响应包含一个<script id=APP_ID></script>包含相应序列化状态(TransferState源)的标记.

出于某种原因,浏览器应用程序尚未使用状态进行初始化.如果我将测试状态硬编码到我的应用程序index.html文件中(通过复制和粘贴),那么我的浏览器应用程序已成功初始化为浏览器状态.我不确定出了什么问题.任何想法非常感谢!

我唯一的猜测是,当我在Chrome的检查器中观看我的应用程序加载时,看起来好像大多数元素一次加载,然后在另一个时间点<script id=APP_ID></script>显示.这似乎暗示脚本标签是以某种方式在浏览器端生成/处理的,即使我已经检查了服务器的响应并且它包含脚本标记.但是,如果脚本标记在客户端进行某种处理,则可能TransferState在处理完成之前进行初始化,这就是我的应用程序未接收状态的原因.再次,任何想法都非常感谢!

这是相关代码:

app.module.ts

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
import { environment } from '../environments/environment';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';    
import { AppRoutingModule } from './app-routing.module';
import { GraphQLModule } from './graphql.module';

@NgModule({
  imports: [
    BrowserModule.withServerTransition({ appId: 'service-work-coordination' }),
    BrowserTransferStateModule,
    AppRoutingModule,
    GraphQLModule,
  ], …

我正在对从服务器发送到我的 Angular 应用程序的打字稿中的数据进行建模。AnOpportunity具有forms包含Form[]对象数组的属性。AForm有一个parent属性，其中可能包含一个Opportunity。为了解决这个类型，它定义文件Opportunity导入Form和定义文件Form导入Opportunity。这会创建一个循环依赖警告。

我发现了几个处理循环依赖的先前 SO 问题（这里，这里），但在每种情况下，它们都在处理 javascript 代码中的循环依赖。在这种情况下，循环依赖只与 typescript 类型有关，编译后将不存在。有没有办法在文件中包含一个类型，同时避免这种循环依赖问题？到目前为止，我还没有发现任何东西。

对于这个问题，我可以想到两种解决方案：

1. 在同一个文件中定义两个模型
2. 重新创建Form的接口Opportunity文件/中Opportunity的接口Form文件。

还有其他/更好的解决方案吗？谢谢！

更新 2

我似乎找到了答案（出于某种原因，它在问题列表中的位置真的很靠后）。这个答案提出了两种可能性

1. 创建一个单独的定义文件（这似乎涉及重新创建Opportunity和Form类接口，因此不会比上面的选项 #2 更好）。

2. 使用导入，这是我已经在做的（并且导致循环依赖警告）。

有没有办法导入刚才一类的相关接口？

更新 3

只是要清楚，目前Opportunity和Form看起来像这样：

// opportunity.ts
import { Form } from '....../form'

export class …

在Angular v6中，当尝试构建我的库时，我遇到了一个极端的非描述性问题 BUILD ERROR Cannot read property 'type' of null

BUILD ERROR
Cannot read property 'type' of null
TypeError: Cannot read property 'type' of null
    at /Users/John/apps/tests/service-work/node_modules/@angular/compiler/bundles/compiler.umd.js:15378:27
    at Array.forEach (<anonymous>)
    at removeSummaryDuplicates (/Users/John/apps/tests/service-work/node_modules/@angular/compiler/bundles/compiler.umd.js:15377:11)
    at TemplateParser.tryParseHtml (/Users/John/apps/tests/service-work/node_modules/@angular/compiler/bundles/compiler.umd.js:14806:34)
    at TemplateParser.tryParse (/Users/John/apps/tests/service-work/node_modules/@angular/compiler/bundles/compiler.umd.js:14799:21)
    at TemplateParser.parse (/Users/John/apps/tests/service-work/node_modules/@angular/compiler/bundles/compiler.umd.js:14780:27)
    at AotCompiler._parseTemplate (/Users/John/apps/tests/service-work/node_modules/@angular/compiler/bundles/compiler.umd.js:20483:43)
    at AotCompiler._createTypeCheckBlock (/Users/John/apps/tests/service-work/node_modules/@angular/compiler/bundles/compiler.umd.js:20250:23)
    at /Users/John/apps/tests/service-work/node_modules/@angular/compiler/bundles/compiler.umd.js:20220:27
    at Array.forEach (<anonymous>)

已经解决了这个问题，我正在发布这篇文章，以帮助遇到此问题的其他任何人。

我有一个简单的 Firebase 函数，如下所示。当通过 javascript (CORS) 访问时，该函数的飞行前选项的请求（CORS 标准的一部分）将返回 302 重定向到以以下内容开头的 url

https://accounts.google.com/ServiceLogin?service=ah&passive=true&continue=https://appengine.google.com/_ah/conflogin%3Fcontinue%3D

并以我的函数的 URL 结尾。这是有问题的整个函数：

import * as functions from 'firebase-functions';
import * as express from 'express';
import * as cors from 'cors';

const app = express();

app.use(cors({ origin: true }));

app.post('*', async (req, res) => {
  res.setHeader('X-Test', 'OK');
  res.setHeader('Set-Cookie', ['__session=ninja']);
  res.send('OK');
});

app.get('*', async (req, res) => {
  res.setHeader('X-Test', 'OK');
  res.setHeader('Set-Cookie', ['__session=ninja']);
  res.send('OK');
});

export const testing = functions.https.onRequest(app);

正如您所看到的，该函数不包含任何重定向逻辑。如果我手动导航到浏览器（第一个）中的重定向链接accounts.google.com，它会显示某种 Google Compute Engine 安全页面，要求访问我的 Google 帐户。最近，当我通过 javascript 访问它们时，之前工作的所有函数都开始使用此 …

在我的 Angular (v4) 应用程序中，我正在尝试创建一个面包屑模块​​。我发现这个问题很有帮助，建议我data像这样将面包屑信息存储在路由器的属性中

{ path: '', component: HomeComponent, data: {breadcrumb: 'home'}}

但是我想做的是在 data 属性中存储一个组件，然后让面包屑模块​​提取并呈现它。允许我像这样与面包屑模块​​交互

{ path: '', component: HomeComponent, data: {breadcrumb: CustomViewComponent}}

按照 angular Dynamic Component Loader 指南和有用的博客文章，我尝试让我的面包屑渲染组件执行以下操作：

import { Component, Input, OnInit, AfterViewInit,
  ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
import 'rxjs/add/operator/filter';

import { MainLogoComponent } from '../my-material/main-logo/main-logo.component';

@Component({
  selector: 'app-breadcrumbs',
  template: `<div #parent></div>`,
  styleUrls: ['./breadcrumbs.component.scss']
})    
export class BreadcrumbsComponent implements OnInit, …

以下功能主要是从使用条件类型的打字稿手册部分中提取的，但它不起作用：

function test<T extends boolean>(a: T): T extends true ? string : number {
  return a ? '1' : 1
}

打字稿报告说：

Type '1 | "1"' is not assignable to type 'T extends true ? string : number'.
  Type '1' is not assignable to type 'T extends true ? string : number'.

我想我错过了一些明显的东西。我怎样才能构造这个函数，以便打字稿根据函数的参数正确推断类型？

我意识到可以使用函数签名重载来解决这个特定问题，但我想了解更多关于条件类型的信息。

我在我的应用程序中有一条路线，形式为localhost/opportunity/:id/volunteers。我想构建一个routerLink导航到同一级别（即localhost/opportunity/:id/waitlist）的不同页面。按照API 文档中Routerlink概述的选项，我得到的印象是routerLink表单中的 arouterLink="./volunteers" 应该链接到我当前所在的页面。因此，routerLinkActiveforrouterLink="./volunteers"应该表示链接是活动的。但它不会那样做...

相关路线如下所示：

const routes: Routes = [
  {
    path: 'opportunity',
    children: [
      {
        path: ':id',
        children: [
          {
            path: 'volunteers',
            component: VolunteersComponent
          },
          {
            path: 'waitlist',
            component: WaitlistComponent
          },
          {
             etc . . .
          }
        ]
      }
    ]
  }
];

将routerLink="./volunteers"出现导航到localhost/volunteers，这不存在。我也试着在表单链接routerLink="../../volunteers"，routerLink="../volunteers"，routerLink="././volunteers"，等（他们没有任何工作，而不是我认为他们会）。

关于我做错了什么的任何建议？显然，我可以:id手动从链接中提取并插入它（类似于routerLink="['opportunity', extractedId, 'volunteers']"），但这感觉是错误的方式，我不想:id在我的应用程序中手动提取's。我似乎只是做错了什么。我已经搜索了一段时间，但还没有找到这个问题的答案。 …