Как получить доменное имя для сервиса в Angular2

Question

Как получить доменное имя для сервиса в Angular2

Некоторые свойства могут быть написаны для метки :

font-family
color
font-*
background-color

Также вы можете использовать собственный шрифт для отдельного тега , например, любой шрифт google , Иконки материалов или другие значки шрифтов из icomoon или аналогичные. (Это может быть полезно для селекторов шрифтов и т. Д.).

Учитывая это, вы можете создавать шрифт семейства шрифтов и вставлять значки в теги , например

, где ★ взято из Icons, а остальное - от Roboto.

Обратите внимание, что пользовательские шрифты не работают для мобильного выбора.

29

angular

задан Павел Куликов 25 March 2016 в 15:28

8 ответов

Другой вариант - использовать DOCUMENT из @ angular / platform-browser.

import {DOCUMENT} from '@angular/platform-browser';

constructor(@Inject(DOCUMENT) private document: Document) {
    let url = document.location.protocol +'//'+ document.location.hostname + ':my_port' );
}

20

ответ дан Simon_Weaver 25 March 2016 в 15:28

Вы можете использовать window, как уже говорили другие, и чтобы сделать его инъекционным, начиная с ng6 и далее, вам нужен токен для инъекций.

Объявите токен следующим образом:

export const WINDOW = new InjectionToken('window',
    { providedIn: 'root', factory: () => window }
);

Затем используйте его в конструкторе классов:

class Foo {
  constructor(@Inject(WINDOW) private window: Window) { }
}

Поскольку Window является интерфейсом в TypeScript, если вы этого не сделаете сделать инъекцию таким образом, когда вы создаете проект для производства, вы получите ошибку: Can't resolve all parameters for <ClassName>. А позже еще один: ERROR in : Error: Internal error: unknown identifier undefined.

Чтобы лучше понять инъекцию, прочитайте угловые документы для DI: https://angular.io/guide/dependency-injection

6

ответ дан Giovanni Bassi 25 March 2016 в 15:28

Я добился этого с помощью следующего кода в app.component.ts:

import { Component, OnInit, Inject, Injectable } from '@angular/core';
import { DOCUMENT } from '@angular/platform-browser';

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

    constructor(@Inject(DOCUMENT) private document: any) { }

    ngOnInit() {
        this.domain = this.document.location.hostname;
        console.log(this.domain);
    }
}

Это должно напечатать доменное имя в вашей консоли.

4

ответ дан Nilesh G 25 March 2016 в 15:28

Угловой 2 последний рабочий раствор:

app.module.ts

providers: [
    {provide: Window, useValue: window},
    ...
]

youclass.ts

constructor(
    @Inject(Window) private _window: Window
) {
    this._baseUrl = `http://${this._window.location.hostname}:3333`;
};

10

ответ дан Marfu 25 March 2016 в 15:28

Я рекомендую использовать window.location, как другие любезно заявили.

Однако вы также можете сделать это, импортировав общую библиотеку Angular 'Location' и используя ее в виде инъекций, например:

import { Injectable } from '@angular/core';
import { Location }   from '@angular/common';
const otherPort = 8000;

@Injectable()
export class ServiceOrComponentName {
  constructor(location: Location) {
    this.baseUrl = location._platformStrategy._platformLocation._location.protocol +
      '//' + location._platformStrategy._platformLocation._location.hostname +
      ':' + otherPort;
  }
}

4

ответ дан LJH 25 March 2016 в 15:28

Я проверял это на Angular 7, и он работал правильно

declare var window: any;

console.log (window.location.host); //result lrlucas.github.io > domain github pages

с window.location.host. Я получаю полный домен.

Примечание. Объявите переменную окна перед @Component

4

ответ дан lucas suarez blanco 25 March 2016 в 15:28

Я использую обычный javascript и нативный API URL для анализа URL:

const parsedUrl = new URL(window.location.href);
const baseUrl = parsedUrl.origin;
console.log(baseUrl); // this will print http://example.com or http://localhost:4200

0

ответ дан gianlucaparadise 25 March 2016 в 15:28

Другие вопросы по тегам:

angular

Обновленный ответ для Angular 6+

Как уже говорили другие, оригинальный ответ больше не работает. Для Angular 6+ вам необходимо предоставить Injection Token , чтобы window -объект можно было разрешить и в AOT -стройке.

Я рекомендую создать массив WINDOW_PROVIDERS в отдельном файле, например так:

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
]

Константу WINDOW_PROVIDERS можно добавить в массив providers в AppModule следующим образом:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [
    WINDOW_PROVIDERS, // <- add WINDOW_PROVIDERS here
    SampleService,
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

В SampleService объект window может быть введен с помощью определенного маркера , например:

import { Injectable, Inject } from '@angular/core';
import { WINDOW } from '../window.provider';

@Injectable()
export class SampleService {

    constructor(@Inject(WINDOW) private window: Window) {
    }

    getHostname() : string {
        return this.window.location.hostname;
    }
}

Исходный ответ для углового 2

Поэтому вам нужно установить провайдера для Window -объекта при загрузке вашего приложения.

import {provide} from 'angular2/core';
bootstrap(..., [provide(Window, {useValue: window})]);

После этого вы можете использовать объект окна и получить доступ к имени хоста следующим образом:

constructor(private window: Window) {
   var hostname = this.window.location.hostname;
}

Как получить доменное имя для сервиса в Angular2

8 ответов

Обновленный ответ для Angular 6+

Исходный ответ для углового 2

Похожие вопросы: