怎么在Angular中利用模板输入变量

@Component({
  selector: 'nz-demo-pagination-item-render',
  template: `
    
    
      
        {{ page }}
        Previous
        Next
        <<
        >>
      
    
  `
})
export class NzDemoPaginationItemRenderComponent {}

//解析前的模板

  ({{i}}) {{hero.name}}

• 在此提示一下，所谓的宿主元素就是指令所在的那个元素，像上面的例子中，div就是*ngFor指令的宿主元素。

• trackBy这个类似于vue和react中的key。可以给模板一个标识，使其重新渲染的时候性能开销降低一些。

然后我们再看官网说的：

• let-i 和 let-odd 变量是通过 let i=index 和 let odd=odd 来定义的。 Angular 把它们设置为上下文对象中的 index 和 odd 属性的当前值。

• 这里并没有指定 let-hero 的上下文属性。它的来源是隐式的。 Angular 将 let-hero 设置为此上下文中 $implicit 属性的值， 它是由 NgFor 用当前迭代中的英雄初始化的。

看完这段描述，我们可以得知：angular为这个模板设置了上下文对象。但是我们看不到这个过程，因为这是在ngFor的源码内部实现的。并且这个上下文对象具备index和odd属性，并且包含一个$implicit（implicit：含蓄的；不直接言明的）的属性。那么我们推断这个上下文对象至少有以下几个属性：

{
    $implicit:null,
    index:null,
    odd:null,
}

那么我们声明let变量的本质其实就是声明一个变量获取上下文对象中的同名属性的值。let-hero不进行任何赋值的话，hero默认等于$implicit的值。无论是有多少个let-a，let-b，let-c还是let-me。声明的这个变量的值都等于$implicit的值。而我们进行赋值过的，比如let-i = "index"，i的值就等于这个上下文对象中的index属性对应的值。

上下文对象是如何设置的

当我们知道这个上下文对象是什么了，就该想这个上下文对象是怎么设置的了。

在结构性指令这一节当中，我们跟着官方示例做了一遍这个自定义结构性指令（如果还没有做的话，建议先跟着做一遍）。在UnlessDirective这个指令中，其构造器constructor声明了两个可注入的变量，分别是TemplateRef和ViewContainerRef。官网给的解释我觉得太过晦涩难懂，我这里给出一下我自己的理解：TemplateRef代表的是宿主元素被包裹之后形成的模板的引用。而ViewContainerRef代表的是一个视图容器的引用。那么问题来了，这个视图容器在哪儿呢？我们在constructor构造器中打印一下ViewContainerRef。打印结果如图：

然后我们点进去这个comment元素。发现其就是一个注释元素。如图所示：

其实我也不是很确定这个视图容器到底是不是这个注释元素。但是毋庸置疑的是，视图容器和宿主元素是兄弟关系，紧挨着宿主元素。我们可以使用ViewContainerRef中的createEmbeddedView() 方法（Embedded：嵌入式，内嵌式），将templateRef模板引用传入进去，创建出来一个真实的视图。由于这个视图是被插入到视图容器ViewContainerRef中了，所以又叫内嵌视图。那么这又和我们的上下文对象有什么关系呢？其实createEmbeddedView这个方法不止一个参数，其第二个参数就是给我们的模板设置上下文对象的。API的详情介绍请看createEmbeddedView这个API的详情。

就这样。我们就可以将上下文对象塞入模板中了，这样的话我们也可以直接使用let声明变量的方法来使用这个上下文对象了。

自定义一个简单的类*ngFor指令——appRepeat

那么我们知道是如何设置的了，那么我们就来验证一下是否是对的。接下来，我们仿照ngfor的功能，自己写一个简单的渲染指令。

首先我们定义一个指令：RepeatDirective。代码如下：

@Directive({
  selector: '[appRepeat]',
})
export class RepeatDirective {
  constructor(
    private templateRef: TemplateRef,
    private viewContainer: ViewContainerRef,
  ) { }

  @Input() set appRepeatOf(heroesList: string[]) {
    heroesList.forEach((item, index, arr) => {
      this.viewContainer.createEmbeddedView(this.templateRef, {
        //当前条目的默认值
        $implicit: item,
        //可迭代对象的总数
        count: arr.length,
        //当前条目的索引值
        index: index,
        //如果当前条目在可迭代对象中的索引号为偶数则为 true。
        even: index % 2 === 0,
        //如果当前条目在可迭代对象中的索引号为奇数则为 true。
        odd: index % 2 === 1,
      });
    });
  }
}

然后我们将其导入NgModule中，这个过程就省略不写了。然后我们在组件中使用一下这个指令：

@Component({
  selector: 'app-structural-likeNgFor-demo',
  template: `
    
原神1.5版本卡池角色
    
自定义ngFor（appRepeat）
    

      
        索引：{{i}} -- {{h}} -- 索引值是否是偶数：{{even.toString()}}
      
    
    
真正的ngFor
    

      
        索引：{{i}} -- {{h}} -- 索引值是否是偶数：{{even.toString()}}
      
    
  `,
})
export class StructuralLikeNgForDemoComponent {
  public heroesList: string[] = ['钟离', '烟绯', '诺艾尔', '迪奥娜'];
}

在这里需要注意的是指令中的appRepeatOf不是乱写的。在微语法的解析过程中let h of heroesList中的of首先首字母会变成大写的，变成Of。然后在给它加上这个指令的前缀，也就是appRepeat。组合起来就是appRepeatOf了。由它来接收一个可迭代的对象。

最后显示的效果图：

关于怎么在Angular中利用模板输入变量就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。