“英雄之旅”见闻和小结----angular2系列三)

　　本系列在前面两篇文章，介绍了Zone.js和angular2的基础概念。而后对于ng2的学习，还是由官方的  

以下内容经过提炼和个人理解，当然也会有不正确的地方，欢迎指正。有兴趣的朋友，可以自己开始ng2之旅，再结合本篇文章一起理解。

ng2的配置比较麻烦，任意的引入包可能导致一些报错，建议直接官方下载  。

ng2 将所有api分成7个类型，在查阅api的时候，可以多留意一下他们的类型，便于理解

　　@Component 申明一个应用程序可重用的UI组件，可以通过bootstrap实例化，也可以通过它本身directives属性相互实例化调用。

'@angular/core'@Component({
selector: 'app-component'<span style="color: #000000;">,template: </span><div>{{title}}</div>
<span style="color: #000000;">
})
export class AppComponent{
title = 'Tour of Heroes'<span style="color: #000000;">;
}

'@angular/platform-browser-dynamic''./app.component'　bootstrap(AppComponent)

<span style="color: #008000;">/<span style="color: #008000;"> 最终页面渲染 <span style="color: #008000;">/
　　

　　　　

　　　　　　

Tour of Heroes

　　　　

　　

　　@Component 会

bootstrap 引导运行@Component时，会先根据@Component 的selector找到dom，并新建一个子注射器，通过一个新Zone实例进行变化检测，

创建一个shadow DOM并载入到dom节点汇总，实例化组件，最后初始化提供的数据。

 shadow dom：

。

　　　　　　　　

　　　　　　　　　　

 [_ngcontent-hvh-2] ......

@Output:

　　使用@input绑定标签属性，创建组件通信的单向输入流。需要引入组件：import { Input } from '@angular/core';

“英雄之旅”例子:

'@angular/core''bank-account''account-id' 'app',template: ` `,directives: [BankAccount] }) class App {} bootstrap(App);

　　在一个指令组件的类里使用@Input() 对一个变量进行申明，被申明的变量可以通过指令的属性进行单向数据绑定。

@Input 有一个参数，绑定dom的属性名，如上面代码：   

dom属性名account-id和类的id变量进行了绑定，

　　未带参数的属性名默认用变量名     

这样就实现组件之间的通信和绑定了。

在angular1中，directive中定义属性scope，达到scope作用域之间的数据绑定，和angular2中的@Input功能类似

"=""="

OnInit&constructor

constructor执行在ngOnInit之前。但他们的概念不同。

import {OnInit} from '@angular/core'

 RouteConfig,ROUTER_DIRECTIVES,ROUTER_PROVIDERS 。

• RouteConfig用于定义路由配置
• ROUTER_DIRECTIVES提供指令( [routerLink] )

'@angular/router-deprecated''my-app'

{{title}}

'/heroes''Heroes'

找到 name 之后修改路由，并显示相应UI组件,最终载入到标签下。

使用router-outlet，UI组件将会自己创建selector标签，将组件加载到router-outlet标签下。

　　　　　　

默认路由&路由传参：

<div class="cnblogs_code">

'/detail/:id',
        name: 'HeroDetail'