Question

如何在不使用window.location.href的情况下以角度7获取完整的当前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中的
ERROR 5:20模块解析失败：   意外令牌（5:20）您可能需要适当的加载程序来处理   此文件类型。 |导出const WINDOW =新   InjectionToken（'window'）; |


const windowProvider：FactoryProvider = {|提供：WINDOW，| useFactory：（）=>窗口｢wdm｣：编译失败。

任何人都可以告诉我如何解决此问题。谢谢，

我关注的更多链接：

Answer 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)
        }
    } 
}

Answer 2

您尝试使用document location.href

database

Answer 3

let getParams = function (url) {
    var params = {};
    var parser = document.createElement('a');
    parser.href = url;
    var query = parser.search.substring(1);
    var vars = query.split('&');
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split('=');
        params[pair[0]] = decodeURIComponent(pair[1]);
    }
    return params;
};

然后像这样使用它。

// Get parameters from the current URL
getParams(window.location.href);

// Get parameters from a URL string
const url = 'https://whatever.com?car=tesla';
getParams(url);

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

3 个答案: