素材巴巴 > 程序开发 >

angular路由 和 router-outlet

程序开发 2023-09-08 07:06:51

在这里插入图片描述
在这里插入图片描述

path

一个用于匹配浏览器地址栏中URL的字符串。

pathMatch

prefix:以指定的路径开头;

full:与指定路径完全一样。

参考

路由跳转

this.router.navigate([‘url’,参数]);
this.router.navigateByUrl(‘url’);

在这里插入图片描述

router-outlet

参考
如果在浏览器的地址栏中添加 /about ,比如: http://localhost:4200/about
路由本应该会匹配地址,并显示 AboutComponent 。然而事实并非如此。我们需要告诉路由要在哪里显示这个AboutComponent组件。为了实现这个,需要在 about.component.html 的最后添加 元素,是 RouterModule 中的其中一个指令。
当然,在实际应用中,我们不会手动在地址栏中输入/about的, 而是通过 标签来实现。

再来看个例子

到底是怎么占位的呢?

当点击 Add coins 这个 标签时,会激活

Add coins

这个时候, 以下的 div 区域会被替换:

这就是说, 如果想在哪个区域显示 create.component.html 这个子网页,只需要添加
就可以了。

总结

子组件
在这里插入图片描述
把子组件模板全部放到一个父组件模板里
在这里插入图片描述
把RouteRoutingModule放到RoutesModule里
在这里插入图片描述
把RoutesModule导入AppModule,程序入口
在这里插入图片描述
在Main.ts里面导入AppModule

在这里插入图片描述
在index.html里面引用App的组件,这个组件就包含了之前导入的全部组件
在这里插入图片描述


标签:

素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。