[发明专利]一种angular5动态加载图片效果的方法

说明书

一种angular5动态加载图片效果的方法，包括布置好网页内容区域的样式布局，使用angular5动态加载图片效果包括以下步骤：在布置好的网页内容区域里，创建tab按钮一和tab按钮二；在tab按钮二中创建TemplateRef模板，并用ng‑template标签包裹，然后标记ng‑template标签为’#tp’，在模板中放置图片；在tab按钮二中创建ViewContainerRef视图容器，并用ng‑container标签包裹，然后标记ng‑container标签为’#content’；在TypeScript文件中引入ngAftreViewChecked生命周期；编写一个函数，在函数中使用angular5的nglf方法判断在ngAftreViewChecked生命周期，插入的图片是否可以动态加载。本发明提出一种angular5动态加载图片效果的方法，通过使用angular5的ngIf方法与ngAftreViewChecked生命周期，使图片动态加载效果正常显示。

技术领域

本发明涉及网页前端技术领域，尤其涉及一种angular5动态加载图片效果的方法。

背景技术

Angular5是一款谷歌的开源的前端框架，拥有容易构建渐进式web应用程序，让APP可以在浏览器中进行缓存，构建优化器，让程序更精小的优点。使用Angular5中的一个tab功能可实现图片内容切换，可以将一些图片内容以动态的方式插入到当前页面中，在这其中，tab功能免不了会使用angular5中的nglf方法来判断当前的tab功能，但是nglf方法与ngAfterViewInit生命周期会发生错误，导致图片内容的动态插入效果无法正常显示。

发明内容

本发明的目的在于提出一种angular5动态加载图片效果的方法，以解决angular5中nglf方法与ngAfterViewInit生命周期发生错误，导致图片内容的动态插入效果无法正常显示的问题。

为达此目的，本发明采用以下技术方案：

一种angular5动态加载图片效果的方法，包括布置好网页内容区域的样式布局，使用angular5动态加载图片效果包括以下步骤：

步骤A：在布置好的网页内容区域里，创建tab按钮一和tab按钮二，并在网页内容区域里分别写入tab按钮一和tab按钮二；

步骤B：在tab按钮二中创建TemplateRef模板，并将TemplateRef模板用ng-template标签包裹，然后标记ng-template标签为’#tp’，然后在模板中放置图片。

在tab按钮二中创建ViewContainerRef视图容器，并将ViewContainerRef视图容器用ng-container标签包裹，然后标记ng-container标签为’#content’；

步骤C：在TypeScript文件中引入ngAftreViewChecked生命周期；

步骤D：编写一个函数，在函数中使用angular5的nglf方法判断在ngAftreViewChecked生命周期，插入的图片是否可以动态加载。

优选的，设置一个全局变量showtab并为全局变量showtab赋值；

分别为所述tab按钮一和所述tab按钮二编写angular5的点击事件，并将字符串“1”作为所述tab按钮一的参数，将字符串“2”作为所述tab按钮二的参数；

编写一个函数包括以下步骤：

编写一个参数类型为字符串的show函数，设置触发show函数时，所述全局变量showtab等于所述show函数传进来的所述tab按钮一的参数或所述tab按钮二的参数。