Typescript 如何在ngAfterViewInit之前处理uriParam？

我试图将信息从一个网站传递到另一个网站。这两个网站不共享相同的url或服务器

我认为最好的方法是使用URL参数（）。 因此，如果我在Angular生命周期中没有弄错的话，在ngAfterViewInit回调之前。 通过执行此操作，self.route.snapshot.queryParamMap.get（'param'）将返回null

我怎样才能得到这个参数？有没有其他（更干净的）方式在两个网站之间传递信息

最初，我的代码是用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'));
        }
    }
}

@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'));
        }
    }
}

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

    param: any;

    constructor() {}

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

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

    param: any;

    constructor() {}

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

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'));
        }
    }
}

@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'));
        }
    }
}

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

    param: any;

    constructor() {}

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

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

    param: any;

    constructor() {}

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

app.component.html

导航组件

@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'));
        }
    }
}

@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'));
        }
    }
}

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

    param: any;

    constructor() {}

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

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

    param: any;

    constructor() {}

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

下面的文件对于示例进行了简化

导航组件

@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'));
        }
    }
}

@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'));
        }
    }
}

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

    param: any;

    constructor() {}

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

@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

{{param}

---

如上所述，目前我无法从URL获取参数。路由器对象为空。

为什么不能直接从一台服务器向另一台服务器发出HTTP请求？Angular应用程序在前端运行，无法相互通信。事实上，我从一个应用程序传递到另一个应用程序的参数是提供当前用户信息的单一用法代码。我们可以将其视为SSO。我想将这些信息从一个站点保存到另一个站点，而无需用户重新连接到每个导航。