美文网首页Angular开发集锦
Angular2关于定义一些全局常量,以及在页面中引用

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

作者: SevenLonely | 来源:发表于2017-08-23 08:55 被阅读1267次

    思路

    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>
    
    

    相关文章

      网友评论

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

        本文链接:https://www.haomeiwen.com/subject/jgpxqxtx.html