Как обработать uriParam перед ngAfterViewInit? - PullRequest
Новая
       24

Как обработать uriParam перед ngAfterViewInit?

1 голос
/ 23 марта 2019

Я стараюсь передавать информацию с одного сайта на другой. Два веб-сайта не используют один и тот же URL-адрес или сервер.

У меня есть идея, что лучше всего использовать параметры URL (http://some.url? Param = value ). Так что, если я не ошибаюсь в жизненном цикле Angular, до обратного вызова ngAfterViewInit. При этом self.route.snapshot.queryParamMap.get ('param') возвращает мне ноль.

Как я могу получить этот параметр? Есть ли другой (более чистый) способ передачи информации между двумя угловыми сайтами?

Изначально мой код был в методе ngOnInit. Я переместил этот код в ngAfterContentInit, но без каких-либо изменений маршрутизатор остается пустым.

Я думал о разборе window.location.href, но он мне не кажется чистым.

app.module.ts 

const appRoutes: Routes = [
  { path: 'profil', canActivate: [ Guard ], component: ProfilComponent },
  /* [...] */
  { path: '**', canActivate: [Guard], redirectTo: 'profil' },

];

/* [...] */

@NgModule({
  declarations: [
    ProfilComponent,
    /* [...] */
  ],
  /* [...] */
  imports: [
    RouterModule.forRoot(appRoutes),
  ],
  entryComponents: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts 

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent implements AfterContentInit {

    constructor() {}

    ngAfterContentInit() {
        const self = this;
        self.logger.debug(self.route); // empty
        self.logger.debug(self.route.snapshot.queryParamMap.get('param')); // null
        if (self.route.snapshot.queryParamMap.get('param')) {
            localStorage.clear();
            localStorage.setItem('externalParam', self.route.snapshot.queryParamMap.get('param'));
        }
    }
}

app.component.ts 

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent implements AfterContentInit {

    constructor() {}

    isAuth(): boolean {
        return !!localStorage.getItem('externalParam');
    }

    ngAfterContentInit() {
        const self = this;
        self.logger.debug(self.route); // empty
        self.logger.debug(self.route.snapshot.queryParamMap.get('param')); // null
        if (self.route.snapshot.queryParamMap.get('param')) {
            localStorage.clear();
            localStorage.setItem('externalParam', self.route.snapshot.queryParamMap.get('param'));
        }
    }
}

app.component.html 

<div id="container" class="h-100">
    <app-nav *ngIf="isAuth()"></app-nav>
    <div id="body" class="h-100">
        <router-outlet></router-outlet>
    </div>
</div>

nav.component.ts 

@Component({
  selector: 'app-nav',
  templateUrl: './nav.component.html',
})
export class NavComponent implements OnInit {

    param: any;

    constructor() {}

    ngOnInit() {
        this.param = localStorage.getItem('externalParam');
    }
}

Следующие файлы упрощены для примера

nav.component.ts 

@Component({
  selector: 'app-nav',
  templateUrl: './nav.component.html',
})
export class NavComponent implements OnInit {

    param: any;

    constructor() {}

    ngOnInit() {
        this.param = localStorage.getItem('externalParam');
    }
}

nav.component.html 

<h1>{{param}}</h1>

Как уже упоминалось выше, на данный момент я не могу получить свой параметр из URL. Объект Маршрутизатор пуст.

...