小白的晋级之路--Angular

目录

一、@ViewChild

二、获取路由参数

三、loadChildren

四、Angular请求另一服务的API（请求代理）

五、angular路由

六、Angular之constructor和ngOnInit差异及适用场景

七、表单中的数据流

1、响应式表单中的数据流

2、模板驱动表单中的数据流

---

现在接触的技术栈是Angular，从零开始，点滴积累，努力提升。

一、@ViewChild

https://www.jianshu.com/p/ac5366abfa74

providers: [ ChildService ]

在上面的子组件里面provider里面提供了一个ChildService类。我们也是可以通过@ViewChild来拿到这个ChildService类的。代码如下

@ViewChild(ChildService) childService: ChildService;

 项目中有个功能是修改密码，将修改密码这个模态框封装为一个组件，嵌入在主页面中，那么在主页面中是这样引入的：

<modify-password #modifyPwd></modify-password>
修改密码所触发的方法：<li nz-menu-item (click)="modifyPassword()">修改密码</li>
在ts文件中是这样引入的：@ViewChild('modifyPwd', {static: false}) modifyPwd;
这样调用的：
modifyPassword() {
    // 修改密码
    this.modifyPwd.show();
  }
而在修改密码模态框的ts文件中show方法是这样的：
show() {
    this.oldPassword = '';
    this.newPassword = '';
    this.repeatPassword = '';
    this.isVisible = true;
  }

二、获取路由参数

this.route.queryParams.subscribe(queryParams => {
   let productId = queryParams.productId;
   let title = queryParams.title;
});

三、loadChildren

在看代码的过程中，发现路由有这样两种表现形式：

loadChildren是延迟加载子模块,这对于加载页面的性能有很好的提升。通俗的讲就是说进入主模块的时候,子模块不加载,等需要进入子模块的时候才加载。项目划分模块的时候,使用loadChildren配置路由是最佳选择方案。

因此当访问子模块的时候，就回去找相应目录下export的模块。

四、Angular请求另一服务的API（请求代理）

看代码的时候，想知道前端是如何向服务端发送请求的，结果找service文件没发现有请求地址。请教之后，知道使用了代理。直接创建一个proxy.conf.json文件，定义所有/api的请求重定向到http://api.yourdomai.com。

而在angular.json文件中，angular-cli已经有这个命令了，在我们启动项目的时候，会请求这个代理，而我们在写代码的