angular 图片引入_一种angular5动态加载图片效果的方法与流程

本发明涉及网页前端技术领域，尤其涉及一种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按钮二的参数。

优选的，在所述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生命周期，使图片动态加载效果正常显示。

附图说明

图1是本发明的angular5动态加载图片效果的流程图。

具体实施方式

下面结合附图并通过具体实施方式来进一步说明本发明的技术方案。

本实施例的一种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生命周期；

首选将所述ngAftreViewChecked生命周期引入所述TypeScript文件中；

然后将所述ViewContainerRef视图容器和所述TemplateRef模板引入所述TypeScript文件中；

接着将所述ViewChild装饰器和所述Component装饰器引入所述TypeScript文件中，然后用所述Component装饰器定义组建的选择器，组件模板文件位置和组件私有CSS样式表文件位置。

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

原本的angular5使用的是ngAfterViewInit生命周期，但是ngAfterViewInit生命周期只调用一次，而ngIf方法是在点击tab按钮二才进行加载的，而当页面加载时就已经调用ngAfterViewInit生命周期了，再点击tab按钮二时，已经不能用了，所以导致图片动态加载的效果出不来，而ngAftreViewChecked生命周期是属于可以重复使用的生命周期，在nglf方法点击tab按钮二后，当页面加载时，还可以继续调用ngAftreViewChecked生命周期，所以可以实现图片的动态加载效果。

首先设置一个组件类，用所述ViewChild装饰器将所述’#content’标记与所述ViewContainerRef视图容器关联起来；

然后用所述ViewChild装饰器将所述’#tp’标记与所述TemplateRef模板的抽象类关联起来。

再设置一个全局变量showtab并为全局变量showtab赋值；

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

分别为所述tab按钮一和所述tab按钮二编写angular5的点击事件，并将字符串“1”作为所述tab按钮一的参数，将字符串“2”作为所述tab按钮二的参数，这里的字符串“1”和字符串“2”即为触发show函数时，全局变量showtab所等于的参数值。

然后在所述tab按钮一和所述tab按钮二中，使用angular5的nglf方法判断所述全局变量showtab是否为字符串“1”，若是，则显示所述tab按钮一的内容；若所述全局变量showtab是否为字符串“2”，则显示所述tab按钮二的内容。

接着在所述ngAftreViewChecked生命周期中，判断所述全局变量showtab是否等于所述tab按钮二的参数，若不等于，则显示无效果；

若是，则使用所述’#tp’标记用createEmbeddedView方法创建嵌入视图，然后所述’#content’标记使用insert方法插入嵌入视图。

最后当点击tab按钮二触发show函数时，ng-container标签所代表的ViewContainerRef视图容器里的内容就会被渲染成注释，但是TemplateRef模板内容会显示出来，即显示出我们插入的所要加载的图片。

以上结合具体实施例描述了本发明的技术原理。这些描述只是为了解释本发明的原理，而不能以任何方式解释为对本发明保护范围的限制。基于此处的解释，本领域的技术人员不需要付出创造性的劳动即可联想到本发明的其它具体实施方式，这些方式都将落入本发明的保护范围之内。