加载之前确认Angular的激活

今天,让我们简要介绍一下需要在应用程序的一部分完全加载之前启动它的情况。


  • 确认使用者的年龄
  • 获得用户对服务条款的同意
  • 显示登录表单
  • 启用从加载页面切换语言

该库将单独启动并渲染您的组件。 您指定启动应用程序的确切时间。

您需要执行五个简单的步骤,然后才能使用它。

安装 ngx-can-activate-app

  npm i -s ngx-can-activate-app 

创建一个组件

它会一直显示到您的应用程序完成激活为止。

 从'ngx-can-activate-app'导入{ NgxCanActivateApp } ; @ Component ({ 
选择器:“应用程序确认”,
模板:“
})
导出类ConfirmationComponent {
构造函数 私有canActivateApp:NgxCanActivateApp ){} onActivate (){ this.canActivateApp.activate () ; }
}

声明组件

将其添加到声明中。

  @NgModule ({ 
声明: [ AppComponent,ConfirmationComponent ]
引导程序: [ AppComponent ]
})
导出类AppModule {}

导入NgxCanActivateAppModule

然后将您的组件添加到模块的初始化中。

 从'ngx-can-activate-app'导入{ NgxCanActivateAppModule } ; @ NgModule ({ 
进口: [
NgxCanActivateAppModule。 forRoot({
组件:ConfirmationComponent
})
]
声明: [ AppComponent,ConfirmationComponent ]
引导程序: [ AppComponent ]
})
导出类AppModule {}

在index.html中指定选择器

将组件的选择器添加到index.html。

  <!doctype html > 
< html lang =“ zh-CN” >
<> </>
<身体>
<应用程序根>
<应用程序确认> </应用程序确认>
</ app-root >
</ body >
</ html >

github上的源代码,stackblitz上的演示。

IndigoSoft / ngx-can-activate-app

ngx-can-activate-app-Angular 5、6+加载前确认应用程序的激活

github.com

ngx-can-activ-app-demo — StackBlitz

在加载Angular 5、6+之前确认激活应用程序

stackblitz.com

如有任何疑问,请通过电报(@thekiba)与我联系。