【Angular】什么是Angular中的APP_BASE_HREF

news/2024/4/30 13:11:09

1 概述:

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

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

2 语法:

provide: APP_BASE_HREF, useValue: '/gfgapp'

3 步骤:

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

4 示例:

app.module.ts

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

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

输出:
在这里插入图片描述

原文

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.cpky.cn/p/11583.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

相关文章

前端学习<二>CSS基础——17-CSS3的常见边框汇总

CSS3 常见边框汇总 <!DOCTYPE html><html lang"en"><head><meta charset"UTF-8"><title>CSS3 边框</title><style>body, ul, li, dl, dt, dd, h1, h2, h3, h4, h5 {margin: 0;padding: 0;}​body {background-c…

Mybatis--TypeHandler使用手册

TypeHandler使用手册 场景&#xff1a;想保存user时 teacher自动转String &#xff0c;不想每次保存都要手动去转String&#xff1b;从DB查询出来时&#xff0c;也要自动帮我们转换成Java对象 Teacher Data public class User {private Integer id;private String name;priva…

RP2040开发笔记

RP2040 采用合宙的RP2040(板载4MB Flash)&#xff0c; 所有开发资料参考官方&#xff1a;树莓派 Pico 中文站

阿里云弹性计算通用算力型u1实例性能评测,性价比高

阿里云服务器u1是通用算力型云服务器&#xff0c;CPU采用2.5 GHz主频的Intel(R) Xeon(R) Platinum处理器&#xff0c;ECS通用算力型u1云服务器不适用于游戏和高频交易等需要极致性能的应用场景及对业务性能一致性有强诉求的应用场景(比如业务HA场景主备机需要性能一致)&#xf…

InternLM2-lesson2笔记

书生浦语大模型趣味 Demo 视频连接&#xff1a;https://www.bilibili.com/video/BV1AH4y1H78d/?vd_source902e3124d4683c41b103f1d1322401fa 目录 书生浦语大模型趣味 Demo课程总览SIG项目Demo部署的一般流程存在的问题总结 课程总览 InternLM2-chat-1.8B部署八戒-chat-1.8B…

FastAPI Web框架教程 第1章 快速上手

1.1 fastapi介绍 简介&#xff1a; FastAPI 是一个高性能&#xff0c;易于学习&#xff0c;高效编码&#xff0c;生产可用的Python Web异步框架 FastAPI 适合来写API&#xff0c;使用 Python 3.6 并基于标准的 Python 类型提示 核心特性&#xff1a; 速度快&#xff1a;可…