zoukankan      html  css  js  c++  java
  • Angular2 use ng-xx (ng-if)

    1 normal component

    /**
     * Created by Administrator on 2015/7/23.
     */
    import {Component, View} from 'angular2/angular2';
    
    @Component({
        selector: 'ng-test'
    })
    
    @View({
        template: '<div>ngff-test</div>'
    })
    
    export class NgTest {
    }
    

    2 inject to another component

    import {Component, View} from 'angular2/angular2';
    import {RouterLink} from 'angular2/router';
    import {NgTest} from '../other/ng-xx';
    
    @Component({
        selector: 'component-1'
    })
    @View({
        templateUrl: './components/home/home.html?v=<%= VERSION %>',
        directives: [RouterLink, NgTest]
    })
    export class Home {
    }
    

     ps:需要import component 和 把directive inject to view

      UI look:(home.html)

    <ng-test></ng-test>
    

    3 use ng-if

    /**
     * Created by Administrator on 2015/7/23.
     */
    import {Component, View, NgIf} from 'angular2/angular2';
    
    @Component({
        selector: 'ng-test'
    })
    
    @View({
        template: '<div>ngff-test</div><div *ng-if="true">hide-element</div>',
        directives: [NgIf]
    })
    
    export class NgTest {
    }
    

      1 import NgIf and directives 

    4 use variable in ng-if

    /**
     * Created by Administrator on 2015/7/23.
     */
    import {Component, View, NgIf} from 'angular2/angular2';
    
    @Component({
        selector: 'ng-test'
    })
    
    @View({
        template: '<div>ngff-test</div><div *ng-if="showElement">hide-element</div>',
        directives: [NgIf]
    })
    
    export class NgTest {
        showElement:boolean;
    
        constructor() {
            this.showElement = true;
        }
    }
    

      

     5 pass property into component

    /**
     * Created by Administrator on 2015/7/23.
     */
    import {Component, View, NgIf} from 'angular2/angular2';
    
    @Component({
        selector: 'ng-test',
        properties: ['showElement']
    })
    
    @View({
        template: '<div>ngff-test</div><div *ng-if="showElement">hide-element</div>',
        directives: [NgIf]
    })
    
    export class NgTest {
        //showElement:boolean;
    
        constructor() {
            //this.showElement = true;
        }
    }
    

      1 use properties:['showElement']

    UI:

    <ng-test [show-element]="false"></ng-test>
    

      

  • 相关阅读:
    win10 ,本地连接无法识别网络 ,无线正常,
    vba 声音
    win10 优化
    比较火和常用的命令
    手机电脑平板 查图纸、查点位图、查通病、自学维修知识等通通都有的工具
    e4a mysql
    e4a 对话框的 多选单选颜色日期时间
    e4s 文本操作 数组操作
    e4a sqlite案例
    e4a-窗口切换
  • 原文地址:https://www.cnblogs.com/lihaozhou/p/4675637.html
Copyright © 2011-2022 走看看