Question

我正在努力完全理解将代码从角度I转换为II的概念。使用以下一小段代码：

7.2.1

如何将上面的角度1转换为angualr 2？我读到它包括用组件替换指令。我可以使用我提供的代码段进行演示吗？提前致谢。

Answer 1

我知道这是一个贬低的问题，但我仍然想为你提供一个答案。

对于上面的html，您可以在角度2中创建类似的东西：

<强> app.component.ts

js2py

带有表单的html文件：

<强> app.component.html

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  onSubmit(f: NgForm) {
    console.log(f.value);  // { first: '', last: '' }
    console.log(f.valid);  // false
  }
}

要呈现此<div class="container"> <form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate> <input name="first" ngModel required #first="ngModel"> <input name="last" ngModel> <button>Submit</button> </form> <p>First name value: {{ first.value }}</p> <p>First name valid: {{ first.valid }}</p> <p>Form value: {{ f.value | json }}</p> <p>Form valid: {{ f.valid }}</p> <p>The result is : {{f.value.first * f.value.last}}</p> </div>组件，您需要在app中添加以下标记：

index.html

我在<body> <app-root>Loading...</app-root> </body>中提供了答案，因为这似乎是更相关的例子。

你可以看到：

现在没有form，它的组件将包含控制器逻辑。
没有ng-controller

我从Angular.io website which has good documentation

我强烈建议您从this book which is free and it really really good

您还可以在my git for Angular

旁注：角度与$scope没有相似之处所以我强烈建议您理解基于AngularJS 1.X的Angular2架构并开始以这种方式重写代码。

从角度I转换为角度2

1 个答案: