[Ionic 2从入门到精通] 2.6 模板

模板，个人认为是Ionic 2中最有趣的东西。也是框架能力厉害的地方。看看下面的代码：

    
        
            My Friends
        
        
        
        
    


    
    
        
            
            
            
            
{{item.name}}
            
{{item.description}}
        
    

上面代码在没有额外样式的情况下，看起来将会是这样的：

1.6.1.jpg

看起来没那么惊艳，但是我们就已经用简单的几行代码设置好了一个复杂的布局，加点自定义样式的话，我们就可以得到一个非常时尚的界面了。稍后我们会从各个方面彻底的了解在Ionic 2中创建模板，但是目前我需要给你找找一个完整的页面模板看起来是什么感觉，以及使用Ionic提供的组件是多么的简单。

Ionic 2中的模板语法有很多知识需要学习，如果你之前有使用过Ionic 1的话，你会发现他有一些重大的变更 —— 所以我们需要具体的学习一下模板。

此后也会涉及到其他的一些知识，但是这个是我认为这开始使用Ionic 2之前最后学要学习的‘核心’知识 —— 一旦你拿下了类和模板，那么你就可以直接可以开始制作一些东西。所以，我们先转入一些基础理论知识的学习，然后在做学一些练习示例吧。

语法

可能是Ionic 2里面最让人困惑的语法之一了。你会经常遇到一些这样的代码：

或者

诸如此类。在Angular 2中 * 语法用与创建一个嵌入模板的快捷方式，所以，当我们使用 *ngIf的时候，上面的代码展开来就是：

使用模板的原因是Angular 2将模板看作是DOM块，这样一来就可以动态操作他了。所以，在上面的 *ngIf 范例中我们不会只按照字面意思将他渲染到DOM，

如果 someBoolean 等于true的话，会显示：

false的话就不显示。同理，当我们使用 *ngFor的时候，我们不只是按照字面上去渲染：

{{item.name}}

我们会针对每个条目分别以段落的方式渲染出来：

Bananas
More Bananas
Pancakes

要使用这个功能的话，我们需要使用