[英]removing url in index.html but how can i have them in app.component.ts
我從index.html中的url中刪除了查詢參數,但是我想在app.component.html中使用這些查詢參數,並使用ActivatedRoute處理我的app.component.ts,現在當我在index.html中擁有此腳本時,我的應用程序便開始了。 componen.ts也不接收那些queru參數,如何讓app.component.ts具有查詢參數?
這是我的index.html中的腳本,用於刪除查詢參數:
<script type="text/javascript">
var url = window.location.toString();
if(url.indexOf("?") > 0) {
var sanitizedUrl = url.substring(0, url.indexOf("?"));
window.history.replaceState({}, document.title, sanitizedUrl);
}
</script>
這是我的app.component.ts解析查詢參數:
import {ApiService} from './api.service';
import {Component, OnInit} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {Converter} from './converter';
import {Title} from '@angular/platform-browser';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
username = '';
department = '';
json;
constructor(
private feedbackService: ApiService,
private titleService: Title,
private route: ActivatedRoute
) {
}
ngOnInit() {
this.route.queryParams.subscribe(params => {
if (params.hasOwnProperty('username')) {
this.username = params['username'];
}
if (params.hasOwnProperty('department')) {
this.department = params['department'];
}
});
}
您不僅可以將這些查詢參數放入會話存儲中,然后再訪問app.component.ts中的會話存儲嗎?
<script type="text/javascript">
var url = window.location.toString();
if(url.indexOf("?") > 0) {
var [ sanitizedUrl, queryParams ] = url.split('?')
window.history.replaceState({}, document.title, sanitizedUrl);
sessionStorage.setItem('params', queryParams)
}
</script>
//app.component.ts
export class AppComponent implements OnInit {
username = '';
department = '';
json;
constructor(
private feedbackService: ApiService,
private titleService: Title,
private route: ActivatedRoute
) {
}
ngOnInit() {
let params = sessionStorage.getItem('params');
// parse params logic here //
if (params.hasOwnProperty('username')) {
this.username = params['username'];
}
if (params.hasOwnProperty('department')) {
this.department = params['department'];
}
};
}
經過一些研究,沒有明確的解決方案,但我確實設法創建了一些可行的解決方案。
為了使它起作用,其背后的想法是使查詢參數保持服務狀態。
進行一項將保存數據的服務:
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class SampleService {
data: BehaviorSubject<any> = new BehaviorSubject({});
data$: Observable<any> = this.data.asObservable();
}
之后,在您的app.component.ts
constructor(
private activatedRoute: ActivatedRoute,
private router: Router,
private sampleService: SampleService
) {}
ngOnInit(): void {
this.sampleService.data$.subscribe(console.log);
this.activatedRoute.queryParams.subscribe((data: {username: string, departure: string}) => {
if(data.hasOwnProperty('username') || data.hasOwnProperty('departure')) {
this.sampleService.data.next(data);
}
setTimeout(() => { // note this timeout is mandatory and it makes this kinda cheatfix the whole thing
this.router.navigateByUrl('/');
});
});
}
這樣,您就可以將參數保存在SampleService的數據行為主題中。 如果您想在某個地方使用它,您所要做的就是注入服務,並訂閱data$
。
請注意,此解決方案包含一些應謹慎處理的訂閱,但不是此問題的主題。
可以在這里找到小型的簡短演示。 當使用queryParams作為/?username = foo打開stackblitz應用程序時,請檢查演示控制台。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.