标签: angular

我有以下型号:

export interface Content {
  lang: string;
  title: string;
}

我需要验证contents FormArray这个parent FormGroup:

this.formBuilder.group({
  defaultLang: ['', Validators.required],
  contents: this.formBuilder.array([], Validators.minLength(1))
});

对于Content我的每个人,我contents FormArray使用以下内容验证模型content FormGroup:

this.formBuilder.group({
  lang: ['', Validators.required],
  title: ['', Validators.required]
});

现在,我想补充以下content FormGroup我contents FormArray来验证每个Content:

(<FormArray>parentFormGroup.controls['contents'])
    .push(this.contentFormGroup);

但是使用这种方法我无法验证这些规则:

• 如果Content填写了其中一个字段,则会进行内容验证(这意味着要添加content FormGroup到内容中contents FormArray)
• 如果没有填写任何内容字段,则不会发生内容验证(这意味着删除content FormGroup了contents FormArrayif if)
• 如果lang的Content是defaultLang的parent FormGroup …

如果我在路线上指定三名警卫,似乎所有警卫都会立即进行评估.

{path: '', component: OptionsComponent, canActivate: [ GuardOne, GuardTwo, GuardThree]}

我遇到的问题是我不希望GuardTwo在GuardOne完成之前运行.有没有办法实现这个目标？

在我们的代码库中,我们有一个虚拟重复指令,它使用Renderer2来创建一个这样的div:

this.renderer2.createElement('div');

在ngOnDestroy方法中,我们像这样销毁它:

this.renderer.destroyNode(this.offsetBeforeEl);

这工作正常,我们没有问题,直到我们在prod模式下构建应用程序,我们开始收到以下错误:

main.js?d73b003…:formatted:87193 Uncaught (in promise) TypeError: this.renderer.destroyNode is not a function

我在该行添加了一个断点,发现实际上destroyNode不是Renderer2上的方法.我去了angular的源代码,并在抽象类定义中找到了方法上方的注释:

/**
   * This property is allowed to be null / undefined,
   * in which case the view engine won't call it.
   * This is used as a performance optimization for production mode.
   */
  destroyNode: ((node: any) => void)|null; 

所以我检查了视图的代码并看到了这个:

if (view.renderer.destroyNode) {
  destroyViewNodes(view);
}
if (isComponentView(view)) {
  view.renderer.destroy();
}

如果我不能依赖现有的方法,那么破坏使用Renderer2动态创建的节点的正确方法是什么？

我正在尝试使用ngrx库来管理我的应用程序状态.我已经浏览了许多ngrx文档和git页面.我知道有三个重要的概念:

1. 商店
2. 减速机和
3. 行动

Store是我们应用程序的单一数据源.因此,任何数据的修改或检索都是通过Actions完成的.我的问题是,当一个动作被发送到商店时到底发生了什么？它如何知道要调用哪个Reducer？它是否解析了注册到商店的所有减速器？在这种情况下,可能有多个具有相同名称的操作会发生什么？

提前致谢.

我正在使用angular-cli with angular2 v4.0 with angular material.

伙计......所有的错误都是什么？我正在努力学习业力,如果我运行npm测试,我会得到34个与材料相关的失败...例如

Can't bind to 'routerLinkActive' since it isn't a known property of 'a'
Can't bind to 'md-menu-trigger-for' since it isn't a known property of 'button'
Can't bind to 'md-menu-trigger-for' since it isn't a known property of 'button'

If 'md-menu' is an Angular component, then verify that it is part of this module.

等等

如何使角度物质与业力相得益彰？

我的应用程序工作正常,但如果达到业力......将是一场彻底的灾难.

谢谢

编辑:

我有很多!app.module.ts文件中的@NgModule中的声明,entryComponents,导入和提供程序.看来我必须在我的dashboard.component.spec.ts文件中添加每一个.我一个接一个地添加,并没有变得愚蠢.我真的不想添加不相关的组件.我怎样才能导入app.module.ts文件？我有50多个要导入...

这是我得到的错误类型:

Failed: Uncaught (in promise): Error: Component BlankComponent is not part of any NgModule or …

我是新来的webpack和angular-cli.我的问题是,当我使用Angular 4项目创建时angular-cli,一切正常,ng-serve但默认情况下所有内容都捆绑在一起.Web包捆绑信息:

我无法在浏览器中看到要调试的component.ts文件.有没有办法禁用捆绑？angular-cli版本细节:

我正在使用Angular版本“ 4.2.2”，Angular Cli版本“ 1.1.1”和zone.js 0.8.12。我的一些曾经在Chrome和PhanthomJS中都可以使用的单元测试现在由于以下错误而失败：

错误未捕获错误：macroTask'setInterval'：无法转换为'running'，期望状态为'scheduled'，为'notScheduled'。

任何人都曾经见过这些错误，并且知道如何解决这些错误？

以下是我的Angular 5应用程序的简化版本。我有一个reducer，我想在我的根模块中注册它。在LINE A中，我收到以下错误消息：

ERROR in src/app/store/app.reducers.ts(7,14): error TS2322: Type '{ post: (state: State, action: Action) => void; }' is not assignable to type 'ActionReducerMap<AppState, Action>'.
  Types of property 'post' are incompatible.
    Type '(state: State, action: Action) => void' is not assignable to type 'ActionReducer<State, Action>'.
      Type 'void' is not assignable to type 'State'.

app.module.ts：根模块

  imports: [
    ...
    StoreModule.forRoot(reducers)
  ],

store / app.reducers.ts：在全球商店内

import {ActionReducerMap} from "@ngrx/store";
import * as fromPost from "../postDir/store/post.reducers";

export interface AppState { …

我正在寻找Angular 4中的解决方案来获取DOM元素的宽度而不采取任何操作(单击或窗口调整大小),只是在页面加载后,但在我开始绘制svg之前.我在这里找到了类似的案例,但它对我不起作用.我犯了同样的错误:

错误TypeError:无法读取未定义的属性"nativeElement"

我需要获取div容器的宽度来设置svg的veiwbox我正在其中绘制.

这是模板:

<div id="what-is-the-width" class="svg-chart-container">
    <svg [innerHTML]="svg"></svg>
</div>

和TS文件在这种情况下需要的东西:

import { Component, Input, OnInit, ViewEncapsulation, AfterViewInit, ViewChild, ElementRef } from '@angular/core';

export class SvgChartComponent implements OnInit {

  @ViewChild('what-is-the-width') elementView: ElementRef;

  constructor() { }

  ngAfterViewInit() {
    console.log(this.elementView.nativeElement);
  }

  ngOnInit() {
    //this method gets the data from the server and draw the svg
    this.getSVGChartData();
  }
}

有没有人有想法如何让这个工作？

我将bootstrap包含在我的angularcli项目中,但是当我尝试包含导航栏时,没有任何元素正常工作.我正在使用网站上的标准boostrap导航栏示例,但它看起来很奇怪:

我的项目导致导航栏无法正确加载有什么问题？

navbar.component.html

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

.angular-cli.json

"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],