Angular2关于定义一些全局常量,以及在页面中引用

思路

1.创建一个server 里面写上自己常用的一些变量 2.在页面中直接绑定绑定形式为{{strings.user.name}} 这样的形式来绑定

不说了直接上代码了

//SettingsService 

import { Injectable } from '@angular/core';
declare var $: any;

@Injectable()
export class SettingsService {

    public user: any;
    public app: any;
    public layout: any;
    public bodyHeight: string;

    constructor() {

        // User Settings
        // -----------------------------------
        this.user = {
            name: 'John',
            job: 'ng-developer',
            picture: 'assets/img/user/02.jpg'
        };

        // App Settings
        // -----------------------------------
        this.app = {
            name: 'angular 4',
            year: ((new Date()).getFullYear())
        };

        // Layout Settings
        // -----------------------------------
        this.layout = {
            isFixed: true,
            isCollapsed: false,
            isBoxed: false,
            isRTL: false,
            horizontal: false,
            isFloat: false,
            asideHover: false,
            theme: null,
            asideScrollbar: false,
            isCollapsedText: false,
            useFullLayout: false,
            hiddenFooter: false,
            offsidebarOpen: false,
            asideToggled: false,
            viewAnimation: 'ng-fadeInUp'
        };

    }

}

组件调用

//Footer.Component.ts

import { Component, OnInit } from '@angular/core';
import { SettingsService } from '../../core/settings/settings.service';

@Component({
    selector: '[footer]',
    templateUrl: './footer.component.html',
    styleUrls: ['./footer.component.scss']
})
export class FooterComponent implements OnInit {

    constructor(public settings: SettingsService) { }

    ngOnInit() {

    }

}


//Footer.Component.html


<span>&copy; {{settings.user.name}} - {{ settings.user.job}}</span>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏乐沙弥的世界

基于catalog 的RMAN 备份与恢复

RMAN的备份与恢复存储仓库的数据通常存放于控制文件或恢复目录中,本文主要讲述基于catalog的备份与恢复。

16620
来自专栏Angular&服务

关于angular2通道使用ts

8930
来自专栏康怀帅的专栏

PHPUnit 详解

本文介绍了 PHP 单元测试框架 PHPUnit。 官方网站:https://phpunit.de/ GitHub:https://github.com/seb...

28130
来自专栏blackheart的专栏

2.[Andriod]Andriod Studio结合Visual Studio Emulator for Android调试Android App

0. 工欲善其事必先利其器 上一篇博客对比了一下Android和WinPhnoe的布局容器,后续篇章重点放在Android的开发上了。 说到开发就绕不开调试程序...

32350
来自专栏Linux 杂货铺

使用Apache Guacamole连接虚拟云桌面

Apache Guacamole是一款HTML5应用程序,可通过RDP,VNC和其他协议访问远程桌面。您可以创建一个虚拟云桌面,用户通过Web浏览器即可访问。本...

5K50
来自专栏草根专栏

使用Identity Server 4建立Authorization Server (6) - js(angular5) 客户端

由于手头目前用项目, 所以与前几篇文章不同, 这次要讲的js客户端这部分是通过我刚刚开发的真是项目的代码来讲解的. 这是后端的代码: https://githu...

64050
来自专栏专注研发

PageHelper分页插件及通用分页js

物理分页依赖的是某一物理实体,这个物理实体就是数据库,比如MySQL数据库提供了limit关键字,程序员只需要编写带有limit关键字的SQL语句,数据库返回的...

57410
来自专栏计算机编程

SNS项目笔记<四>--RXjs简要用法

在命令行输入ionic g provider youProviderName 在创建好后,系统会自动导入从@angular/http里导入Http这个类,方便后...

16140
来自专栏数据之美

使用 django-blog-zinnia 搭建个人博客

django-blog-zinnia 虽然小巧,但是具备了个人博客应用的全部基础功能,且具有很高的拓展性,并且开箱即用。以下是官方列出的一些特性: 评论 站...

36890
来自专栏乐沙弥的世界

Windows平台下安装MongoDB

wmic os get caption wmic os get osarchitecture

25830

扫码关注云+社区

领取腾讯云代金券