Подтверждение активации Angular до его загрузки
Готовая реализация и кейсы использования
Published in
2 min readJul 1, 2018
Сегодня мы вкратце рассмотрим случай, когда вам необходимо запустить часть приложения до его загрузки.
Для чего это нужно?
- Подтверждение возрастного рейтинга пользователя
- Согласие с правилами сервиса
- Отображение формы ввода пароля
- Выбор языка на странице загрузки
NgxCanActivateApp!!! 🎉
Библиотека сделает всю работу по запуску и рендерингу вашего компонента, и вы сами определяете момент, когда необходимо запустить приложение.
Для начала использования, необходимо выполнить 5 простых действий.
Установите ngx-can-activate-app
npm i -s ngx-can-activate-appСоздайте компонент
Этот компонент будет отображен до тех пор, пока приложение не закончит активацию.
import { NgxCanActivateApp } from 'ngx-can-activate-app';
@Component({
selector: 'app-confirmation',
template: '<button (click)="onActivate()">Activate</button>'
})
export class ConfirmationComponent {
constructor(private canActivateApp: NgxCanActivateApp) {}
onActivate() { this.canActivateApp.activate(); }
}Задекларируйте компонент
Добавьте компонент в declarations.
@NgModule({
declarations: [ AppComponent, ConfirmationComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule {}Импортируйте модуль NgxCanActivateModule
И добавьте свой компонент в его инициализацию.
import { NgxCanActivateAppModule } from 'ngx-can-activate-app';
@NgModule({
imports: [
NgxCanActivateAppModule.forRoot({
component: ConfirmationComponent
})
],
declarations: [ AppComponent, ConfirmationComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule {}Укажите селектор в index.html
Добавьте селектор вашего компонента в index.html.
<!doctype html>
<html lang="en">
<head></head>
<body>
<app-root>
<app-confirmation></app-confirmation>
</app-root>
</body>
</html>
