【问题标题】：How to migrate to the new angular2 router and forms?如何迁移到新的 angular2 路由器和表单？
【发布时间】：2016-12-04 18:08:41
【问题描述】：

在使用 angular2 beta 开发了一段时间后，我开始收到警告说我正在使用已弃用的表单版本。不仅如此，一些像primeng这样的css包在angular/router被弃用后被破坏了。

有没有什么简单的方法可以从 angular2 beta 迁移到新的 rc 表单和路由器？

我正在努力解决类似的错误

''没有值访问器

和

没有路由器供应商！

【问题讨论】：

标签： angular angular2-routing angular2-forms

【解决方案1】：

我发现this great article 关于从已弃用的角度路由器迁移到新的角度路由器。以下是基础知识：

路由器：

配置：

已弃用：

@RouteConfig([
  {path: '/',name: 'Heroes',component: Heroes,useAsDefault: true},
  {path: '/detail/:id',name: 'HeroDetail',component: HeroDetailComponent}
])

bootstrap(AppComponent, [
  ROUTER_PROVIDERS
]);

会变成：

const appRoutes: RouterConfig = [
  { path: '', component: Heroes, terminal: true },
  { path: 'detail/:id', component: HeroDetailComponent }
];

bootstrap(RootComponent,[
  provideRouter(appRoutes)
]);

链接：

已弃用：

<a [routerLink]="['/Heroes']">Heroes</a>
<a [routerLink]="['/HeroDetail', { id: 1 }]">Captain America</a>

会变成：

<a [routerLink]="['']">Heroes</a>
<a [routerLink]="['detail', 1]">Captain America</a>

路由参数：

已弃用：

export class HeroDetailComponent {
  constructor(private params: RouteParams) {
    let idParam = params.get("id");
  }
}

会变成：

export class HeroDetailComponent {
  constructor(private route: ActivatedRoute) {
    let idParam = route.params._value.id;
  }
}

您应该从“@angular/router”导入所有新内容。

对于表单迁移，这对我有用：

表格

已弃用：

@Component({
    selector: "my-form",
    directives: [FORM_DIRECTIVES]
})
export class MyFormPage{
    myForm: ControlGroup;
/* rest of the class */
}

会变成：

@Component({
    selector: "my-form",
    directives: [REACTIVE_FORM_DIRECTIVES]
})

export class MyFormPage{
    myForm: FormGroup;
/* rest of the class */
}

已弃用：

<form [ngFormModel]="myForm" #f="ngForm" (submit)="submitForm(f.value)">
    <div class="form-group">
        <label>Name</label>
        <input type="text" ngControl="name">
    </div>
</form>

会变成：

<form [formGroup]="myForm" (ngSubmit)="submitForm(myForm.value)">
    <div class="form-group">
        <label>Name</label>
        <input type="text" formControlName="name">
    </div>
</form>

您应该从“@angular/forms”导入所有新内容。

【讨论】：