2

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

我认为最好的方法是使用 URL 参数（http://some.url?param=value）。因此，如果我在 Angular 生命周期中没有记错的话，在 ngAfterViewInit 回调之前。通过这样做，self.route.snapshot.queryParamMap.get('param') 返回 null。

我怎样才能得到这个参数？是否有另一种（更清洁）的方式在 2 个有角度的网站之间传递信息？

最初我的代码在 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>

导航组件.ts

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

    param: any;

    constructor() {}

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

为示例简化了以下文件

导航组件.ts

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

    param: any;

    constructor() {}

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

导航组件.html

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

如上所述，目前我无法从 URL 中获取我的参数。Router 对象为空。

4

0 回答 0