第五天 Angular学习

组件间消息传递

方向一：父=》子

代码示例：

父代创立自己的属性username

父代将自己的username属性绑定给child2Name

子代创建child2Name用来接收父代传递过来的绑定属性

子代view即html将model也就是ts中的属性

方向二：子=》父

代码示例：

子代创建双向绑定的属性和事件方法

子代ts之中有特殊的事件方法可以将子代的数据传给父代 EventEmitter

父代监听子代的特殊事件传递过来的数据

父代处理传过来的属性，将其赋值给自己的属性

父子组件传递数据的简便方法：父亲直接使用子组件的引用

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

路由和导航

多页面应用：一个项目中有多个完整html文件，使用超链接跳转——销毁一颗DOM树，同步请求另一颗，得到之后再重建新的

单页面应用：称为SPA（Single Page Application）

整个项目中有且只有一个“完整的”HTML文件，其他的“页面”都只是DIV片段；需要哪个“页面”就将其异步请求下来，“插入”到“完整的”HTML文件中

单页应用的优势：整个项目中客户端只需要下载一个html页面，创建一个完整的DOM树，页面跳转都是一个DIV替换另一个DIV——能够实现过场动画

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

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

router:路由器，内部包含 ——路由词典（我的理解是计网中的路由表）

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

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 为每个路由组件分配一个路由地址

2. 注册“路由词典”

//app.module.ts

3. 创建路由组件挂载点——称为“路由出口”

4. 访问测试

注意：

1. 路由词典中的地址不能以斜杠开头或者斜杠结尾，中间可以

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

3. 路由重定向：

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

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

传统方式：

<a href="路径"></a>

angular路由跳转方式：

使用模板跳转方法

<标签 routerLink="/路径"></标签>

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

使用脚本跳转方法

//跳转到商品详情页-需要"路由器"服务

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

获取组件中的数据