本发明的目的在于提出一种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按钮二的参数。
优选的，在所述tab按钮一和所述tab按钮二中，使用angular5的nglf方法判断所述全局变量showtab是否为字符串“1”，若是，则显示所述tab按钮一的内容；若所述全局变量showtab是否为字符串“2”，则显示所述tab按钮二的内容。
优选的，在所述ngAftreViewChecked生命周期中，判断所述全局变量showtab是否等于所述tab按钮二的参数，若是，则使用所述’#tp’标记用createEmbeddedView方法创建嵌入视图，然后所述’#content’标记使用insert方法插入嵌入视图。
优选的，还包括ViewChild装饰器和Component装饰器；
在所述TypeScript文件中引入所述ngAftreViewChecked生命周期包括以下步骤：
将所述ngAftreViewChecked生命周期引入所述TypeScript文件中；
将所述ViewContainerRef视图容器和所述TemplateRef模板引入所述TypeScript文件中；
将所述ViewChild装饰器和所述Component装饰器引入所述TypeScript文件中，然后用所述Component装饰器定义组建的选择器，组件模板文件位置和组件私有CSS样式表文件位置。
优选的，设置一个组件类，用所述ViewChild装饰器将所述’#content’标记与所述ViewContainerRef视图容器关联起来；
用所述ViewChild装饰器将所述’#tp’标记与所述TemplateRef模板的抽象类关联起来。
本发明的有益效果：
1、解决angular5的ngIf方法与ngAfterViewInit生命周期之间的错误；
2、通过使用angular5的ngIf方法与ngAftreViewChecked生命周期，使图片动态加载效果正常显示。
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jquery