Загрузить маршрут после установки данных в Angular 4

В моем приложении есть некоторые данные, которые являются общими для всего приложения. Но данные заполняются после загрузки представления. Например, такие данные, как пользовательские настройки, профиль и т. д. Я знаю, что мы можем использовать разрешение для загрузки данных до загрузки представления, но я не могу добавить разрешение для всех маршрутов. Поэтому, когда конкретный маршрут обновляется, данные недоступны или ответ от сервера приходит после загрузки представления.

Как это может быть сделано?

Ниже приведен пример кода того, чего я пытаюсь достичь. в App.Component.ts, если токен существует, затем перенаправить на запрошенную страницу, иначе перенаправить на вход в систему.

if (token)
{ 
   this.commonServ.loadAppData();
   this._router.navigate([(path == 'login' || path == '') ? 'test' : path]);                     
}
else
   this._router.navigate(['login']);

Метод загрузки данных обращается к нескольким API и загружает данные в модели.

Например:

public loadAppData() {

        this.getUserSettings().then(settings => {
            if (settings) {
                //Do Something
            }
        }, error => {

            });



        this.setUserProfile().then(settings => {
          //Do something

        });

    }

Данные из setUserProfile поступают после загрузки представления. Как это может быть сделано?

Спасибо!


angular observable promise
person Shruti Nair    schedule 29.12.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Определите компонент «оболочки», который загружается перед любым другим компонентом, и добавьте к нему преобразователь.

Шаблон приложения

<router-outlet></router-outlet>

Шаблон компонента оболочки

<pm-menu></pm-menu>

<div class='container'>
    <router-outlet></router-outlet>
</div>

Модуль маршрутизации приложений

@NgModule({
    imports: [
        RouterModule.forRoot([
            {
                path: '',
                component: ShellComponent,
                resolve: { data: DataResolver }. // <--- HERE
                children: [
                    { path: 'welcome', component: WelcomeComponent },
                    {
                        path: 'products',
                        canActivate: [AuthGuard],
                        loadChildren: './products/product.module#ProductModule'
                    },
                    { path: '', redirectTo: 'welcome', pathMatch: 'full' },
                ]
            },
            { path: '**', component: PageNotFoundComponent }
        ])
    ],
    exports: [RouterModule]
})
export class AppRoutingModule { }
person DeborahK    schedule 29.12.2017
comment
Я создал компонент оболочки. Но я не могу понять, как внести изменения в маршрутизацию. В моем приложении были разные модули, и каждый модуль также имеет свой собственный файл маршрутизации. Итак, в маршрутизации приложения у меня есть следующие маршруты const appRoutes: Routes = [ {путь: '', redirectTo: '/login', pathMatch: 'full' }, {путь: '**', компонент: PageNotFoundComponent }, ]; - person Shruti Nair; 29.12.2017
comment
Посмотрите приведенный выше пример, как продукты загружаются с помощью loadChildren. Вы можете увидеть полный пример здесь: github.com/DeborahK/Angular-Communication - person DeborahK; 29.12.2017
comment
Проголосуйте за то, что сэкономили наше время маркером // ‹--- ЗДЕСЬ — действительно хорошая практика. - person Dima; 15.05.2018