组件间消息传递
方向一:父=》子
代码示例:
父代创立自己的属性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
定义“路由词典”——[{URL-组件},{URL-组件}]
//app.module.ts 为每个路由组件分配一个路由地址
注册“路由词典”
//app.module.ts
创建路由组件挂载点——称为“路由出口”
访问测试
注意:
路由词典中的地址不能以斜杠开头或者斜杠结尾,中间可以
路由词典中可以指定一个默认首页地址:{path:"",component:......}
路由重定向:
4.路由字典中可以指定一个匹配任意地址的地址:'**',注意该地址只能用于整个路由词典的最后一个
路由跳转/导航:从一个路由地址跳转到另一个地址
传统方式:
<a href="路径"></a>
angular路由跳转方式:
使用模板跳转方法
<标签 routerLink="/路径"></标签>
注意:可用于任何标签上,跳转地址应该以/开头,防止以相对方式跳转
使用脚本跳转方法
//跳转到商品详情页-需要"路由器"服务
注意:Router类是RouterModule提供的一个服务类,声明依赖即可使用