Angular速成5 实际问题记录¶

以做一个blog系统为例记录一些常见问题点和解法做法不一定好或对但至少能跑起来

用户登录相关

新建blog

编辑blog 会发现编辑和新建大部分界面和逻辑是一样的。可以把编辑相关的页面/组件提出来，加入一些配置项，做成可复用。组件和模板其实天然就是可嵌入的，还挺方便。

子组件调用父组件函数比如父组件有个变量a控制页面，希望子组件的某个操作能控制a。 EventEmitter https://angular.io/api/core/EventEmitter

还可以通过传函数实现 https://newbedev.com/angular-4-call-parent-method-in-a-child-component

innerHtml问题 https://www.digitalocean.com/community/tutorials/angular-innerhtml-binding-angular

authGuard问题 authGuard.canActivate如果简单判断一个变量a，a可能并没有初始化好。因为a可能是根据http接口的结果来的。希望等待http有了结果，设置好a之后才判断。

我是在auth service里做一个initAuth()，在最顶层的AppComponent.ngOnInit()调用。 auth service里起一个Promise。。用rxjs的lastValueFrom把http的observable转成promise进行await

this.authObs = this._httpClient.get<any>(this.serverUrl + "myself");
this.authP = lastValueFrom(this.authObs);
let myself = await this.authP;

然后authGuard判断时也await this.authP; 即可等到http返回后才判断auth。

dom初始化监听相关问题初始问题：页面要做一些初始化，默认显示一个进度条，完了通过ngif某个控制变量a转另一个ng-template b。

这里组件默认的hook貌似只监听默认显示的进度条。如果代码里改变a以后直接操作b的话，状态是混乱的，容易出错(比如操作b的dom)。所以希望监听b的初始化事件，等b初始化完再对它操作。

但是粗略找了一圈没找到解法。

在一本书上看到一些讨论。用hidden属性来控制dom是否显示也是可以的。区别是设置为hidden，对应的逻辑还是会跑，而ngif排除的dom就不会处理。如果dom包含大量数据，那么性能就会有差别。

实际可能会出错 https://angular.io/errors/NG0100 ExpressionChangedAfterItHasBeenCheckedError

最后也没用hidden，通过加初始化参数规避了。

https://indepth.dev/posts/1001/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error https://stackoverflow.com/questions/37355768/how-to-check-whether-ngif-has-taken-effect https://medium.com/allenhwkim/angular-watch-for-element-changes-made-to-dom-tree-bb92062fe5e9 https://blog.angular-university.io/angular-ngif/ https://www.angularjswiki.com/angular/difference-between-ngif-and-hidden-or-displaynone-in-angular/

全局数据

http的处理¶

http成功失败的处理挺繁琐。基本上得调接口，然后订阅，再分情况处理。可进行简单封装，起一个service。 service调HttpClient接口，组件调servie接口并订阅，组件中处理成功失败。还可以再对HttpClient封装一层，统一一些参数形式。

很多情况需要对所有http的发送和结果做统一处理。比如需要添加统一的header数据。比如一旦出错要弹框报错。比如成功后要显示成功信息。比如返回特定数据时要进入登录页面等等。那么希望有个点能处理所有http结果。 HttpInterceptor可以实现相关功能。 https://angular.io/api/common/http/HttpInterceptor https://angular.io/guide/http#intercepting-requests-and-responses

pipe

angular pipe

rxjs pipe

Angular速成5 实际问题记录¶

http的处理¶

目录

目录