En este artículo vamos a ver qué es APP_BASE_HREF en Angular 10 y cómo usarlo.
APP_BASE_HREF devuelve APP_BASE_HREF es el prefijo de URL que debe conservarse.
Sintaxis:
provide: APP_BASE_HREF, useValue: '/gfgapp'
Acercarse:
- En app.module.ts y APP_BASE_HREF en proveedores con useValue.
- En app.component.ts, almacene APP_BASE_HREF en cualquier variable y utilícelo.
Ejemplo 1:
aplicación.módulo.ts
Javascript
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import {APP_BASE_HREF} from '@angular/common'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule ], providers: [ {provide: APP_BASE_HREF, useValue: '/gfgapp'} ], bootstrap: [AppComponent] }) export class AppModule { }
aplicación.componente.ts
Javascript
import { Component, Inject } from '@angular/core'; import {APP_BASE_HREF} from '@angular/common'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'demo1'; constructor(@Inject(APP_BASE_HREF) private baseHref:string) { var a = this.baseHref; console.log(a, " is base HREF") } }
Producción: