• 结构指令

    结构指令

    结构指令是处理组件或元素通过使用模板标签呈现的方式。 这允许我们运行一些代码来决定最终渲染的输出。 Angular 2有一些内置的结构指令,如ngIfngForngSwitch

    注意:对于不熟悉模板标记的用户,它是一个具有几个特殊属性的HTML元素。 嵌入在模板标记中的内容不会在网页加载时呈现,而是在运行时通过代码加载的内容。 有关模板标记的更多信息,请访问MDN文档。

    结构化指令在模板中有自己的特殊语法,它们作为语法糖。

    1. @Component({
    2. selector: 'app-directive-example',
    3. template: `
    4. <p *structuralDirective="expression">
    5. Under a structural directive.
    6. </p>
    7. `
    8. })

    我们的伪结构伪指令不带方括号,而是带有星号。 注意,即使没有方括号,绑定仍然是表达式绑定。 这是因为它是语法糖,允许以更直观的方式使用指令,类似于在Angular 1中使用指令。上面的组件模板等价于以下:

    1. @Component({
    2. selector: 'app-directive-example',
    3. template: `
    4. <template [structuralDirective]="expression">
    5. <p>
    6. Under a structural directive.
    7. </p>
    8. </template>
    9. `
    10. })

    这里,我们看到我们前面说的结构化指令使用的template 标签。 Angular 2也有一个做同样的事情的内置template 指令。

    1. @Component({
    2. selector: 'app-directive-example',
    3. template: `
    4. <p template="structuralDirective expression">
    5. Under a structural directive.
    6. </p>
    7. `
    8. })