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

发布时间：2020-12-17 10:38:22 所属栏目：安全来源：网络整理

导读：本系列在前面两篇文章，介绍了Zone.js和angular2的基础概念。而后对于ng2的学习，还是由官方的? 以下内容经过提炼和个人理解，当然也会有不正确的地方，欢迎指正。有兴趣的朋友，可以自己开始ng2之旅，再结合本篇文章一起理解。 ng2的配置比较麻烦，任意的引

　　本系列在前面两篇文章，介绍了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'

'/heroes''Heroes'

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

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

默认路由&路由传参：

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

方法体里

import { RouteParams } from '@angular/router-deprecated'export class ComponentA{
constructor(private routeParams: RouteParams){
console.log("id:",<span style="color: #0000ff;">this.routeParams.get('id'<span style="color: #000000;">))
}
}

通过Router手动跳转页面:

import { Router } from '@angular/router-deprecated'

　　　　this.router.navigate(['HeroDetail',{ id: this.id }]);//参数1路由名称，参数2参数

绑定一个事件流，在组件之间通信。
'''@angular/core'= .open.emit();
}







?　　这趟 “英雄之旅“ 仅仅是一个开始，见识了angular2核心、常用的api、组织结构和代码风格。还有很多内容是需要去专研和理解。
虽然涉及不深，但是已经明显感觉到，一些angular1中的不足，在angular2中已经不存在了。
                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!