Angular 7: Как я могу получить полный URL текущей страницы - PullRequest
Новая
       19

Angular 7: Как я могу получить полный URL текущей страницы

1 голос
/ 06 мая 2019

Как я могу получить полный текущий URL в angular 7 без использования window.location.href?

Например, допустим, мой текущий 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

Я пытался следовать этому решению, которое, кажется, та же проблема, что и я, и также обновил

Как получить доменное имя для сервиса в 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
];

In 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 Ошибка анализа модуля: Неожиданный токен (5:20) Вам может понадобиться соответствующий загрузчик для обработки этот тип файла. | экспорт const WINDOW = новый InjectionToken ( 'окно'); |

const windowProvider: FactoryProvider = {| предоставить: ОКНО, | useFactory: () => window ｢｢ wdm ｣: Не удалось скомпилировать.

Может кто-нибудь сказать, пожалуйста, как я могу решить эту проблему. Спасибо,

Дополнительные ссылки, по которым я следовал:

Ответы [ 3 ]

3 голосов
/ 09 мая 2019

Универсальная серверная сторона не знает о расположении окна.

Экспресс-сервер, с другой стороны, знает URL-адрес из запроса, отправляемого на сторону сервера.

Итак, нам нужно ввести URL-адрес запроса из express в 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)
        }
    } 
}
1 голос
/ 06 мая 2019

Dd вы пытаетесь с документом location.href 

class SomeComponent {
  constructor(@Inject(DOCUMENT) document: any) {
  console.log(document.location.href);
}
0 голосов
/ 07 мая 2019 
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);
...