【Angular】什么是Angular中的APP_BASE_HREF

1 概述:

在这篇文章中,我们将看到Angular 10中的APP_BASE_HREF是什么以及如何使用它。

APP_BASE_HREF为当前页面的基础href返回一个预定义的DI标记。 APP_BASE_HREF是应该被保留的URL前缀。

2 语法:

javascript 复制代码
provide: APP_BASE_HREF, useValue: '/gfgapp'

3 步骤:

  • 在app.module.ts和APP_BASE_HREF的提供者中使用价值。
  • 在app.component.ts中,将APP_BASE_HREF存储到任何变量中并使用它。

4 示例:

app.module.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 { }

app.component.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")
  }
}

输出:

原文

相关推荐
前端小巷子10 分钟前
Webpack 5模块联邦
前端·javascript·面试
晓得迷路了14 分钟前
栗子前端技术周刊第 91 期 - 新版 React Compiler 文档、2025 HTML 状态调查、Bun v1.2.19...
前端·javascript·react.js
江城开朗的豌豆26 分钟前
前端路由傻傻分不清?route和router的区别,看完这篇别再搞混了!
前端·javascript·vue.js
LBJ辉2 小时前
2. Webpack 高级配置
前端·javascript·webpack
灵感__idea9 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
hui函数12 小时前
掌握JavaScript函数封装与作用域
前端·javascript
Carlos_sam12 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴85013 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
你这个年龄怎么睡得着的14 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
Dream耀14 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架