在Angular6(7)内自定义首页图片文字

主要使用的是ng-alain@delon/theme包内置的方法。

首先,配置好文件。在项目的assets文件夹内放好图片和配置json文件

文件配置

然后,编辑好json文件

{
  "app": {   // app这里是不能改的,后面在框架的内置服务里可以直接读到
    "login_sys_name":"登录页的项目名字",
    "other_msg":"其他随便任何文字",
    ...
    "login":"login.png",   // 图片的名字,固定的,无论传什么图片上来都是这个,新的替代旧的,也不用文件名去重了
  },
...
}

最后就是使用框架服务让内容生效

// 引入这个服务
import {SettingsService} from '@delon/theme';  

constructor(
    public settings: SettingsService
)  { }

// 用它!!
 ngOnInit () {
    this.getTexts();
 }
 getTexts () {
    this.titleText = this.settings.app;
 }

HTML里直接用就完事儿了

// 路径写死,只管传图片给后台,后台存进项目的img文件夹内就行,覆盖之前的那个图片,名字是一样的 
<img class="logo" src="../../../assets/img/{{titleText.login}}" alt="" >  

// 其他想要写的内容是在json内配好的,项目内配置好了以后,后台找到这个json文件,修改键名的对应值就行
<p >{{titleText.login_sys_name}}</p>  

就酱。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容