Angular4.0路由导航简单介绍
准备工作:
学习路由,必须要知道以下几个与路由相关的对象的作用以及这些对象所在位置
由上可知:
如果想一进入某个网址就自动跳转至另个网址地址,比如一旦点击了“/a”链接就自动跳转到“/b”网页,要做到这个需求就要重定向路由。这里以一进去网站就跳转到“/home”作为例子
如果是用户输入了错误的地址,没有该页面,则对用户提示没有存在该页面,则在路由配置的最后一行写上下面的代码,注意!必须是最后一行,否则其他页面就会被匹配到错误页
2.在AppComponent中的Html中,RouterOutlet负责了路由组件的内容的展示,在主页中起到了占位符的作用;而RouterLink是点击该标签后路由到哪个组件; 3.可以用Router来导航到另一个指定的路由,一般写在需要导航到特定路由的ts,在我这里是写在了appComponent.ts中。使用它是必须要引入相应的对象,以及在构造函数中实例化一个对象
4.ActivatedRoute保存着路由的参数,路由地址等,一般用来接收路由传参,用法和Router一样,也是先引入ActivatedRoute,实例化对象,写在接收参数的ts,比如app.componet向detai.component传了参 ,那就在detail.component.ts写AcivateRoute
再点击demo页面时,如果先点击了”详情“按钮,再点击”ActivatedRoute详情按钮“会发现上url上已经有传参了,可是id没值;可是如果反过来先点击”ActivatedRoute详情按钮“,再点击”详情“,就会发现url已经没有参数,可是id的值却还是存在的。 会出现这个原因,是因为, (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |