目录
六、Angular之constructor和ngOnInit差异及适用场景
现在接触的技术栈是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已经有这个命令了,在我们启动项目的时候,会请求这个代理,而我们在写代码的