如何在Angular中获取完整的URL? [英] How to get full url in Angular?

问题描述

我的应用程序利用了Angular Universal，我想在Angular组件中获取当前url的完整路径.我认为我必须在可能需要注入窗口的地方使用window对象，或者更好的选择是简单地检查它是否在浏览器中.是否有使用Angular API的更清洁的解决方案?

My app takes advantage of Angular Universal and I'd like to get the full path of the current url in an Angular component. I think I have to use the window object where I may need to inject the window or maybe the better option is to simply check if it's in the browser. Are there any cleaner solutions utilizing Angular's API?

  url: string;

  constructor(private router: Router) { }

  ngOnInit() {
    this.router.events.subscribe((val) => {
      this.url = `${window.location.protocol}//${window.location.host}${window.location.pathname}`;
    });
  }

我要问的问题是如何以与Angular Universal兼容的方式获取完整的url

The question I'm asking is how to get the full url in a way that is compliant with Angular Universal

推荐答案

如果您使用的是Express，则可以将express中的url注入到您的组件中

If you are using Express, you can inject the url from express to your component

步骤1:修改节点服务器以传递所需的

Step #1: modify your node server to pass the url you want

//Get index.html file contents from dist/browser/index.html
const DIST_FOLDER = join(process.cwd(), 'dist'); 
const template = readFileSync(join(DIST_FOLDER, 'browser', 'index.html')).toString();


app.engine('html', (_, options, callback) => {
var fullUrl = options.req.protocol + '://' + options.req.get('host') + options.req.originalUrl;

  renderModuleFactory(AppServerModuleNgFactory, {
    // Our index.html
    document: template,
    url: options.req.url,
    // DI so that we can get lazy-loading to work differently (since we need it to just instantly render it)
    extraProviders: [
      provideModuleMap(LAZY_MODULE_MAP),
      {
        provide: 'serverUrl',
        useValue: fullUrl
      }
    ]
  }).then(html => {
    callback(null, html);
  });
});

第2步:在组件/服务中，添加一个可选参数

Step #2: In your component/service, add an optionnal parameter

constructor(@Inject(PLATFORM_ID) private platformId: Object, @Optional() @Inject('serverUrl') protected serverUrl: string)
{
 // Here, this.serverUrl will have a value only when using angular universal

这篇关于如何在Angular中获取完整的URL?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！