Angular 7：如何获取当前页面的完整 URL

Posted 2023-02-22

【中文标题】Angular 7：如何获取当前页面的完整 URL

【英文标题】：Angular 7 : How can i get the complete URL of the current page

【发布时间】：2019-09-24 01:28:15

【问题描述】：

如何在不使用 window.location.href 的情况下以 Angular 7 获取完整的当前 URL？

例如，假设我当前的 URL 是http://localhost:8080/p/drinks?q=cold&price=200

我怎样才能获得完整的 URL 而不仅仅是/p/drinks?q=cold&price=200？

我已尝试使用this.router.url，这仅提供/p/drinks?q=cold&price=200，而不是完整的主机名。

我不想使用window.location.href 的原因是它会导致ng-toolkit/universal 中的渲染出现问题

我尝试遵循这个似乎与我相同的问题并且也更新了的解决方案

How to get domain name for service in Angular2

这是我的代码

windowProvider.js

import  InjectionToken, FactoryProvider  from '@angular/core';

export const WINDOW = new InjectionToken<Window>('window');

const windowProvider: FactoryProvider = 
  provide: WINDOW,
  useFactory: () => window
;

export const WINDOW_PROVIDERS = [
  windowProvider
];

在 app.module.ts

中

@NgModule(
    .......
    providers:[
    .......
    windowProvider
   ]
)

在我需要的页面中：

import WINDOW as WindowFactory from '../../factory/windowProvider';
......
 constructor(private router: Router, private helper: Helpers,
             @Inject(WindowFactory) private windowFactory: any,
            ) 
console.warn('HELLO I M WINDOW FACTORY', this.windowFactory.location.hostname);

购买这个会在编译时出错

./src/app/factory/windowProvider.js 中的错误 5:20 模块解析失败： Unexpected token (5:20) 你可能需要一个合适的加载器来处理 这种文件类型。 |导出常量窗口 = 新 InjectionToken('窗口'); |

const windowProvider: FactoryProvider = |提供：窗口，| useFactory: () => window ℹ ｢wdm｣: 编译失败。

谁能告诉我如何解决这个问题。谢谢，

How to get base url in angular 5?

How to get the current url in the browser in Angular 2 using TypeScript?

How to get current route

我关注的更多链接：

【问题讨论】：

看看这里是否有帮助***.com/a/47205502/1160794

@David，我检查了链接似乎可以工作，但我无法让它工作。我已经评论了你的答案，你可以看看。

【参考方案1】：

通用服务器端不知道 window.location。

另一方面，快速服务器从发送到服务器端的请求中知道 url。

所以我们需要将 express 中的请求 url 注入到 angular..

server.ts

let template = readFileSync(join(__dirname, '..', 'dist', 'index.html')).toString();

app.engine('html', (_, options, callback) => 
    renderModuleFactory(AppServerModuleNgFactory, 
        document: template,
        url: options.req.url,
        extraProviders: [
             provide: 'requestUrl', useFactory: () => options.req.url, deps: [] ,    // 1. set up the provider for the url
            provideModuleMap(LAZY_MODULE_MAP)
        ]
    ).then(html => 
        callback(null, html);
    );
);

..为了在我们需要的地方检索它..

url-logger.ts

class UrlLogger 
    constructor(
        private window: Location,
        private injector: Injector,                         // 2. we need the injector to ..
        @Inject(PLATFORM_ID) private platformId: string,
    )  

    public log() 
        if (isPlatformServer(this.platformId)) 
            const requestUrl = this.injector.get('requestUrl');    // 3. ..retrieve the injected url
            console.log('server greets you via ' + requestUrl)
         else 
            console.log('browser says hello from ' + window.location.href)
        
     

【讨论】：

template 是一个常数或类似的常数。如果我从角核心导入它，那么它会抛出错误

template 是模板 index.html 的完整路径：“renderModuleFactory() 函数将模板 HTML 页面（通常为 index.html）、包含组件的 Angular 模块和确定要显示哪些组件的路线”citation from angular docs。我也相应地编辑了答案。