Aangular 父子间组件传递

1.父子间组件传递------重点&难点

Vue.js和Angular中的父子间消息传递原理一样，都可以用口诀：

“Props Down，Events Up”

方向1：父 =>子

父组件通过“子组件的自定义属性”向下传递数据给子组件

1.Parent.ts: 父组件创建数据

userName ='苍茫大地'

2.Parent.html: 父组件将自己的数据绑定给子组件的属性

<child2  [child2Name]='userName'></child2>

3.Child2.ts： 子组件定义扩展属性

@Input()           //声明为 "输入型属性"

private  child2Name:string = null

4.Child2.html ： 子组件使用自定义属性

<p>{{child2Name}}</p>

方向2：子 =>父

子组件通过触发特定的事件(其中携带着数据),把数据传递给父组件(父组件提供事件处理方法)

1.Child1.ts:自定义事件发射器 ------- 输出型属性

@Output( )

private   cryEvent  =new EventEmitter()

2.Child1.ts:在某个时刻发射事件

this.cryEvent.emit( 子组件向传给父组件的数据 )

-----------------------------------------------------------------

3.Parent.html:监听子组件的事件

<child1  (cryEvent)="doCry($event)"></child1>

4.Parent.ts:接收子组件传递的数据

doCry( e ){   e就是子组件传递过来的数据   }

父子组件传递数据的简便方法:父亲直接使用子组件的引用  ------视图子组件

Parent.html:使用#为子组件声明识别符

<div  #c1></div>

<myc02  #c2></myc02>

Parent.ts:

@ViewChild('c1',{static:true})

private   child1;

 @ViewChild('c2',{static:true})

private  child2;

提示：ViewChild装饰器用于将子组件识别符与某个属性关联起来，第一个参数必须

是已经存在的子组件识别符(不带#)，第二个参数static指定该组件是否为"静态组件"----

不会有时有有时无的组件。

注意：通过“ViewChild-视图子组件”方式父组件可以获得任一子组件中的任意数据----

一定程度上违反了"最少知识法则"

2.总结：组件的模板中可以出现的内容

<div id="d">

<myc01 #c01></myc01>

<p  *ngIf="isMarried"></p>

<li  *ngFor="let  emp of empList;let  i=index">{{emp}}</li>

<button (click)="doClick($event)"></button>

<div   #myDiv></div>

</div>

1.HTML标准元素/属性

2.组件对应的元素

3.Angular指令------如ngIf、ngFor

4.模型数据/方法------Model,如empList

5.事件对象/子组件传递的数据-------$event

6.模板变量-------在模板中声明的临时变量，如ngFor循环产生的emp、index等

7.NG元素识别符--------都是以#开头，在脚本中使用ViewChild进行关联

3.路由和导航

多页面应用：一个项目中有多个完整HTML文件，使用超链接跳转-----销毁一颗DOM树，同步

请求另一颗，得到之后再重建新的DOM树。

不足：DOM树要反复重建，间隔中客户端一片空白

单页面应用：称为SPA(Single Page Application)整个项目中有且只有一个“完整的”HTML文件，

其他的“页面”都只是DIV片段。需要哪个“页面”就将其异步请求下来，“插入”到“完整的”

HTML文件中。

单页面应用的优势：整个项目中客户端只需要下载一个HTML页面，创建一个完整的DOM树，页面跳转

都是一个DIV替换另一个DIV而已-------能够实现过场动画。

单页应用的不足：不利于SEO访问优化

route:路径、路线、路由，有两部分：目标地址+处理过程

router:路由器，内部包含着路由字典

Angualr中使用“单页应用”的步骤：

(0)创建整个应用需要的路由组件

ng    g  component  index

ng    g  component  product-list

ng    g  component  product-detail

ng    g  component  user-center

1.定义“路由字典”--------[{URL-组件},{URL-组件}]

//app.module.ts     为每个路由组件分配一个路由地址

let routes ={

{path:'index',component:IndexComponent},

....

{path:'ucenter',component:UserCenterComponent}

}

2.注册“路由字典”

//app.module.ts

imports:[ BrowserModule,RouterModule.forRoot(routes)]

3.创建路由挂载点-------称为“路由出口”

//app.component.html

<router-outlet></router-outlet>

4.访问测试

http://127.0.0.1:4200/ucenter

注意：

1.路由字典中的路由地址不能以/开头或结尾，但中间可以包含/

2.路由字典中可以指定一个默认首页地址：{ path:"",component:.... }

3.路由词典中每个路由中要么指定component,要么指定redirectTo(重定向到另一个路由地址)

4.路由词典中可以指定一个匹配任意地址的地址：'**',注意该地址只能用于整个路由词典中的最后一个!

面试题：Vue.js中的路由跳转的机制有哪些？

1.hash法：只需要修改url中的hash部分

http://127.0.0.1/index.html#/ucenter

2.history法：需要修改window.history对象，从而支持浏览器自带的后退按钮

http://127.0.0.1/ucenter

面试题：Vue.js中的路由跳转的机制有哪些？

1.history法：需要修改window.history对象，从而支持浏览器自带的后退按钮

http://127.0.0.1/ucenter

路由跳转/导航：从一个路由地址跳转到另一个

实现方案：

方式1：使用模板跳转方法

<any routerLink="/ucenter"></any>

注意：1.可用于任意标签上   2.跳转地址应该以/开头，防止以相对方式跳转

方式2：使用脚本跳转方法

        constructor(private router:Router){}     //声明依赖

...

this.router.navigateByUrl('/ucenter')     //执行跳转

注意：Router类是RouterModule提供方的一个服务类，声明依赖即可使用。

5.路由参数

在路由词典中定义路由地址时，其中可以包含可变的参数：

{path:'product/detail/:lid',component....}

在路由跳转时可以为路由参数提供具体的参数值：

<a  routerLink='/product/detail/5'>

<a  routerLink='/product/detail/13'>

到了目标路由组件，可以读取“当前路由地址”中的路由参数：

constructor(private route:ActivatedRoute){}

ngOnInit(){

//读取路由参数

this.route.params.subscribe( (data)=>{ data.lid 就是路由参数 } )

}