文档结构  
可译网翻译有奖活动正在进行中,查看详情 现在前往 注册?
原作者:Ashwin. Shetty (2016-12-29)    来源:CodeProject [英文]
CY2    计算机    2016-12-29    0评/290阅
翻译进度:已翻译   参与翻译: zhongzhong (8)

介绍

在这篇文章中, 我们将探讨如何使用Angular2框架来创建嵌套组件并将数据从父组件传递到子组件。 在阅读这篇文章之前, 我建议阅读我的前两篇文章,以便更好地理解。 这篇文章引用了之前的文章的源代码在 这里

我想在这篇文章上得到反馈.。请随时分享您的意见或您也可以给我发电子邮件 shettyashwin@outlook.com。 如果你喜欢这篇文章,请不要忘记它。

第 1 段(可获 1.29 积分)

前提条件

  • Angular 2 开发环境已安装 (供参考,点击这里)
  • 基本运行 angular 2 App (供参考, 点击这里)

让我们开始

让我们开始,复制上一篇文章源代码 (在这里可以获得)到一个新的文件夹 nestedComponent。 在nestedComponent 文件夹里面, 我们需要使用npm install重新安装 npm 包。 npm install安装完成之后,你的文件夹应该结构应该像下面这样 。

在这篇文章中, 我们把在student-form组件底部呈现的标签移动到嵌套组件.。 这就是我们的 student-form.html 文件移动之后的效果。

第 2 段(可获 1.15 积分)
<div>
    Student First Name :- <input [(ngModel)] = "Student.FirstName" type="text"><br/>
    Student Last Name :- <input [(ngModel)] = "Student.LastName" type="text"><br/>
    Student Age :- <input [(ngModel)] = "Student.Age"  type="text"><br/>
</div>

让我们在app目录中添加一个新的文件- student-detail.component.ts。 这个文件存放student-detail 组件的逻辑。

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

@Component({
  selector: 'student-detail',
  templateUrl: '../view/student-detail.html'
})

export class StudentDetailComponent {
   @Input() FirstName:String;
   @Input() LastName:String;
   @Input() Age:number;
}
第 3 段(可获 0.31 积分)

在这个组件中, 我们将从父控件传递数据来展现。 为实现这一目标,我们将从 angular/core模块导入Input。 我们定义了一个 selector 和templateUrl 在第 4 和第 5行。 用来在Student-Detail 组件中接收父组件传递过来的数据, 我们定义了 @input() 和FirstNameLastName 以及 Age 在第 9, 10 和 11行。现在我们需要添加HTML文件在第 5行。将这个文件添加进去,并且命名为 student-detail.html。

<section>
    <br/>
    <div>Student Details are ...</div>
    <div>
      First Name : {{FirstName}} <br/>
      Last Name : {{LastName}} <br/>
      Age : {{Age}}
    </div>
    <br/>
    <ng-content></ng-content>
</section>
第 4 段(可获 0.91 积分)

在我们刚才添加的HTML模板,我们引用的变量在student-detail.component.ts 文件中的第9,10 和 11行定义了。 我在上面的HTML模板高亮了这一变量的名称。 在HTML模板, 我们还添加了 ng-content 标签。 这个标签将会展现student-detail标签内的内容。 我们将更详细的讨论这个问题,在我们讲 student-detail 标签放在主组件student-form中的时候。 让我们在 student-form中注入我们新创建的组件。 这是 student-detail标签更新后的模板

<div>
     Student First Name :- <input [(ngModel)]="Student.FirstName" type="text"><br/>
     Student Last Name :- <input [(ngModel)]="Student.LastName"  type="text"><br/>
     Student Age :- <input [(ngModel)]="Student.Age" type="text"><br/>
    <student-detail FirstName="{{Student.FirstName}}" LastName="{{Student.LastName}}" 
     Age="{{Student.Age}}">
        <div>This is inside nested control</div>
    </student-detail>
</div>
第 5 段(可获 1.01 积分)

在第5行,我们增加了student-detail标签和FirstName, LastName以及Age属性, 并与父组件的各个变量对应。 我们使用花括号(属性名称=”{{表达式}}“)的形式来映射变量,当同时我们也能使用中括号([属性名称]=”表达式“)的形式来映射,像下面这样:

<student-detail [FirstName]="Student.FirstName" [LastName]="Student.LastName" [Age]="Student.Age">
        <div>This is inside nested control</div>
 </student-detail>

如果你注意到student-detail标签内的div标签,同样会通过 student-detail 组件中的ng-content传递到 student-detail中并且渲染在我们添加的这个标签(student-detail)的内部。如果你使用过angular1.x,这个和angular1的ng-transclude很相似。

第 6 段(可获 0.94 积分)

最后一步是在student.module.ts文件中映射依赖。 以下是 student.module.ts更新之后的内容,我高亮了更改了的部分。

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { StudentComponent }  from './student.component';
import {StudentDetailComponent} from './student-detail.component';
import {FormsModule} from '@angular/forms';

@NgModule({
  imports:      [ BrowserModule, FormsModule],
  declarations: [ StudentComponent, StudentDetailComponent ],
  bootstrap:    [ StudentComponent ]
})

export class AppModule { }
第 7 段(可获 0.33 积分)

在第4行, studentDetailComponent被导入了, 在第9行, 我们声明了同样的对象。 最终你的目录结构应该类似下面这样:

现在打开命令行窗口并导航到应用的根目录,并执行 npm start命令。现在您应该在默认浏览器中看到最终结果。如果你在输入框中输入内容,同样的内容将展示在嵌套的组件中(就是student-detail组件)。

总结

在这篇文章,我们创建了一个嵌套组件,它从父组件获取数据,然后渲染它。 我们还讨论了几种用与父子组件映射数据的方法。

参考

第 8 段(可获 1.3 积分)

文章评论