templating(模板)

templating特点:

Dynamic Loading动态加载

Directives指令

 

Component Directive组件指令示例：

@ComponentDirective({
    selector:'tab-container',
    directives:[NgRepeat]
})
export class TabContainer {
    constructor(panes:Query<pane>) {
        this.panes = panes;
    }

    select(selectedpane:pane) { ... }
}

 

Decorator Directive装饰器指令示例：

@DecoratorDirective({
    selector: '[ng-show]',
    bind:{'ngShow:': 'ngShow'},
    observe: {'ngShow': 'ngShowChanged'}
})
export class NgShow {
    constructor(element:Element) {
        this.element = element;
    }

    ngShowChanged(newValue){
        if(newValue){
            this.element.style.display = 'block';
        }else{
            this.element.style.display = 'none';
        }
    }
}

 

Template Directive模板指令示例：

@TemplateDirective({
    selector: 'nf-if',
    bind: {'ngIf': 'nfIfChanged'}
})
export class NgIf {
    constructor(viewFactory:BoundviewFactory, viewport:ViewPort) {
        this.viewFactory = viewFactory;
        this.viewPort = viewPort;
        this.view = null;
    }

    ngIfChanged(value) {
        if (!value && this.view) {
            this.view.remove();
            this.view = null;
        }
        if (value) {
            this.view = this.viewFactory.createView();
            this.view.appendto(this.viewPort);
        }
    }
}