当使用Angular Universal时，如果URL包含不安全字符，可能会遇到Transfer状态为空的问题。同时，由于XHR调用的重复触发，这会导致性能问题，降低应用程序的整体速度。

解决这个问题的方法是使用DomSanitizer服务来深入清理URL，并确保其安全性。以下是示例代码：

import { Component, OnInit } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; import { HttpClient } from '@angular/common/http'; import { ActivatedRoute } from '@angular/router'; import { TransferState, makeStateKey } from '@angular/platform-browser'; import { tap, map, filter } from 'rxjs/operators';

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit {

constructor( private sanitizer: DomSanitizer, private http: HttpClient, private route: ActivatedRoute, private state: TransferState ) {}

ngOnInit() { const url = this.route.snapshot['_routerState'].url; const safeUrl = this.sanitizer.bypassSecurityTrustUrl(url);

const key = makeStateKey('data-' + safeUrl);
const urlData = this.state.get(key, null as any);
if (urlData !== null) {
  // 数据已经缓存了！
  console.log('From Cache');
  console.log(urlData);
  return;
}

this.http.get(safeUrl).pipe(
  filter(Boolean),
  map(res => res as any),
  map(res => {
    const data = res.data;
    this.state.set(key, data as any);
    return data;
  })
).subscribe(
  data => {
    console.log('From API', data);
  }
);

}

}

在这个示例中，我们使用了DomSanitizer服务来清理URL，并使用缓存的TransferState来避免重复的XHR调用，提高性能。

请注意，这只是一个示例代码，实际用法可能因