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
相关资源：垃圾分类数据集及代码