小编kts*_*gop的帖子

我有一个动态生成的Angular 2 FormGroup,其中包含多个FormControl输入字段.一些输入是日期,它们作为unix时间戳从服务器获取.

我想做的是:

1. 当我的FormGroup被填充时,能够将unix时间戳转换为人类可读的形式
2. 在提交表单时将日期的人工表示转换为unix时间戳.

第1部分有点简单,使用Angular的日期管道,如下所示:

<input class="form-control" [formControlName]="question.key"
[value]="this.form.controls[this.question.key].value | date:'dd/MM/yyyy'">

其中this.form是对FormGroup的引用,this.question是一个基于动态表单的官方教程的自定义包装类:

https://angular.io/docs/ts/latest/cookbook/dynamic-form.html

尝试以这种方式更改日期输入将不起作用,因为管道将不断尝试转换输入值,从而使输入不可用,如果不为管道'DatePipe'异常抛出Invalid参数.

为了澄清,我使用FormGroup.patchValue()api 填写表单,并使用api提交表单数据FormGroup.getRawValue().

我曾尝试使用Angular 2日期选择器组件,但它们使我的巨大形式非常慢,所以我想在没有自定义日期选择器或任何jQuery依赖小部件的情况下这样做.

提前致谢.

我几乎可以肯定我应该,但我没有找到有关Redux文档的任何具体信息.我的大多数Angular组件中的模式是我订阅/取消订阅Redux商店,如:

import { Component, OnInit } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'selector',
    templateUrl: 'name.component.html'
})
export class ComponentNameComponent implements OnInit {
    private unsubscribe : Function;

    constructor(@Inject(AppStore) private store: Store<AppState>) {}

    ngOnInit() {
        this.unsubscribe = this.store.subscribe ( ()=>{ this.updateFromState(); });
    }
    // Is unsubscribing onDestroy necessary?
    ngOnDestroy(){
        this.unsubscribe();
    }

    this.updateFromState(){
        // ...
    }
}

所以我想知道我是否应该总是取消订阅商店,如果我没有,会发生什么.

在我的主模块 (app.module) 中使用以下 Angular 2 Routes，我能够成功地浏览所有引用的组件视图。

const routes: Routes = [
    {path: '', redirectTo: 'home', pathMatch: 'full'},
    {path: 'home', component: HomeComponent},
    {path: 'other', component: OtherComponent},
    {path: 'extra', component: ExtraComponent},
    {path: 'group', component: GroupComponent,
        children: [
        {path: '', component: FirstPageComponent},
        {path: 'comp1', component: FirstPageComponent},      
        {path: 'comp2', component: SecondPageComponent},
        {path: 'comp3', component: ThirdPageComponent},
        {path: 'comp4', component: FourthPageComponent}
        ]
    },
    {path: '**', component: HomeComponent}
];

另外，使用 LocationStrategy，这里描述： LocationStrategy and browser URL styles

我可以访问

http://localhost:3000/extra

通过直接在地址栏上输入它，因为路径被重定向到应用程序的根目录并由 Angular 的路由处理。

但我不能直接访问像

http://localhost:3000/group/comp2

这会产生 404 错误，因为请求的所有资源都从路径http://localhost:3000/group/ …

我已经编辑了关于Dynamic Forms的官方 Angular.io 教程，以便添加一个“数字”类型的表单控件/输入字段。

https://plnkr.co/edit/NslBCrFZLQnLblAqcmzV

NumberQuestion 类

import { QuestionBase } from './question-base';

export class NumberQuestion extends QuestionBase<string> {
  controlType = 'numberbox';
  type: string;

  constructor(options: {} = {}) {
    super(options);
    this.type = options['type'] || '';

  }
}

创建一个新的 NumberQuestion ：

  //...
  new NumberQuestion({
    key: 'years',
    label : 'Years active',
    type : 'number',
    order : 4

  })

模板 ：

<div [formGroup]="form">
  <label [attr.for]="question.key">{{question.label}}</label>

  <div [ngSwitch]="question.controlType">

    <input *ngSwitchCase="'textbox'" [formControlName]="question.key"
            [id]="question.key" [type]="question.type">

    <input *ngSwitchCase="'numberbox'" [formControlName]="question.key"
            [id]="question.key" [type]="question.type">

    <select [id]="question.key" *ngSwitchCase="'dropdown'" [formControlName]="question.key"> …

有什么方法可以<router-outlet>在角度组件上使用多个条目，并根据路由加载不同的组件/模块？

我已经设法使用Outlet Context和Template Variablereferences来做到这一点，但这给处理辅助路由带来了很多复杂性。

我的主要目标是根据用户所在的路线加载不同的标头组件/模块（最好是延迟加载），与主组件/模块的<router-outlet>工作方式相同。

下面的例子不起作用。还有其他方法可以实现这一目标吗？

app.component.html

<div class="application-wrapper">
  <header>
    <router-outlet name="header"></router-outlet>
  </header>
  
  <main>
    <router-outlet></router-outlet>
  </main>

  <footer>...</footer>
</div> 

app-routing.module.ts

//...
const routes: Routes = [
  {path: '', pathMatch: 'full', redirectTo: 'intro'},
  {
    path: 'intro',
    component: IntroComponent
  },
  {
    path: 'intro',
    component: HeaderOneComponent,
    outlet: 'header'
  },
  {
    path: 'main',
    component: MainComponent
  },
  {
    path: 'main',
    component: HeaderTwoComponent,
    outlet: 'header'
  },
];
//...