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>

　　

 

转载于:https://www.cnblogs.com/lihaozhou/p/4675637.html