峰会路转的博客

前后端分离开发，少不了与后端进行数据接口的对接，在vue，react中我们要借助第三方的axios来进行数据请求。在ng中，为我们封装了了一层httpClient，我们直接使用即可。

ng已经更新到v18了，我对他的印象还停留在v1,v2的版本，最近研究了下，与react和vue是越来越像了，所以准备正式上手了。新官网地址:https://angular.cn/

如果要在html实现条件判断，来动态的显示隐藏某个元素，或者是要显示一个列表数据，该怎么实现。

ng中的语法跟vue中是一样的插值语法，其实也是早期vue抄的ng的思路，使用{{variable}}形式，vue借鉴了ng和react，这个我们就不多了。

状态的变化导致属性值的变化，这个时候我们就需要用到动态属性，ng中的动态属性用[]包裹即可。

在 app.routes.ts 中，定义路由path 前面不能有’/‘，否则会报错’，ng 渲染后 会自动给我们加上’/'，不用我们手动加a 的 routerLink 属性，必须和 path 对应，否则会报错a的href属性不能用了，切换时页面会刷新闪烁，routerLink不会路由的 component，引入路径不对，会提示组件类型找不到的暴红路由的 title，在浏览器中，标题栏会显示这个,是自动给我们显示，不用我们手动赋值path: "/",title: "首页",},

组件之间的通信是我们业务开发中少不了的,先了解下父子组件的通信。

又可以叫做异步组件，异步组件就是组件在加载的时候不是一次性全部加载，而是当需要的时候再去加载。需要异步加载的子组件。这就实现了异步组件。

何为管道，ng 翻译的真烂，但是听多了你就理解了，类似于 vue2 中的过滤器，过滤器在 vue3 中已经废弃。其他的管道，可以去官网研究下。

这个比 vue 要繁琐点，不复杂，但是比 react 的自己手动实现要方便，ng 帮我们实现了双向绑定。为了让表单使用 Angular 的特性实现数据绑定，需要导入 FormsModule。跟 vue 的 v-model 很像，写法比 vue 的繁琐。这样，我们就实现了表单数据的双向绑定。

Angular 中的依赖注入（DI）是框架最强大的特性之一。可以将依赖注入视为 Angular 在运行时为你的应用 提供所需资源的能力。依赖项可以是服务或其他资源。使用服务的一种方式是作为与数据和 API 交互的方式。为了使服务可重用，应该将逻辑保留在服务中，并在需要时在整个应用程序中共享它。创建服务，需要使用 Angular CLI 命令 ng generate service。这样我们就实现了ng中的依赖注入。

改造 src/app/app.config.ts，在。在需要使用理由跳转的页面，注入路由模块的依赖。最后在详情页面进行数据的接受，展示。这样我们就实现了路由动态传参。,下面两种跳转方式都行。