Ctrl+K

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

On this page