19跳转的方式
1,可以通过Router类对应的对象中的navigateUrl()
2,也可以通过Router类对应的对象中的navigate方法实现跳转,参数是一个数组,第一个元 素是path,第二个参数是要传递的参数
this.myRouter.navigate ( [ path, argument ] ) ;
跳转:this.myRouter.navigate( [ '/check' ] );
传参:this.myRouter.navigate( [ '/check', { id=10 } ] )
通过navigate进行传参,相比navigateUrl少了一步,无需再给接收方配置路由地址
navigate练习
demo15/
demo15/login.component.ts,dashboard.component.ts;
在login,有一个button,有一个超链接,一个输入框,点击上述button或者超链接 跳转到 dashboard,dashboard接收并显示在 h1 的标签中
①先实现跳转到dashboard (button 和 超链接)
②监听用户输入,把用户输入的值打印出来
③用一个变量保存用户输入的值,然后跳转到dashboard的navigate中,作为参数传递到dashboard页面中
④在dashboard页面中将这个值渲染出来
⑤超链接跳转并且传参
总结:
传参有两种方案:
方案一:需要配置接收方路由地址
{ path : "dashboard" } ---> { path : "dashboard: /uName=zhangsan"}
①navigateByUrl ( 'dashboard / zhangsan' )
②routerLink="dashboard/zhangsan"
方案二:不需要配置
①navigate( " [ ' dashboard' , {uName : 'zhangsan'} ]" )
②[ routerLink ] = " ['/dashboard',{ uName : 'zhangsan'}] "