Angular中NgTemplateOutlet指令的理解和用法是什么

这期内容当中小编将会给大家带来有关Angular中NgTemplateOutlet指令的理解和用法是什么，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

创新互联公司：从2013年创立为各行业开拓出企业自己的“网站建设”服务，为上千家公司企业提供了专业的做网站、成都网站建设、网页设计和网站推广服务， 定制制作由设计师亲自精心设计，设计的效果完全按照客户的要求，并适当的提出合理的建议，拥有的视觉效果，策划师分析客户的同行竞争对手，根据客户的实际情况给出合理的网站构架，制作客户同行业具有领先地位的。

最近在看一个培训项目的时候有看到这个NgTemplateOutlet这个结构性指令，但是我之前没接触过，不知道这东西是怎么用的，然后，我去官网上去搜了一下这个api（官网链接点这里）。

只是说一下NgTemplateOutlet的用法和使用场景。

使用方法

这个api按照官网的说法是这样的：

根据一个提前备好的 TemplateRef 插入一个内嵌视图。

我给它翻译一下：使NgTemplateOutlet的宿主元素变成一个内嵌视图——这个内嵌视图是根据一个提前定义好的templateRef模板引用生成的。而宿主元素无论是什么元素，都不会被渲染出来。

我们将官网的示例改一下（因为官网的人命我看不懂）：

@Component({
  selector: 'ng-template-outlet-example',
  template: `
    
    

    
    

    
    


    Hello
    Hello {{name}}!
    My name is LeBron {{person}}!
`
})
export class NgTemplateOutletExample {
  myContext = {$implicit: 'World', lastName: 'James'};
}

一个宿主元素可以使用ngTemplateOutlet这个结构性指令，使自己变成任意的一个模板生成的内嵌视图。并且可以给其设置上下文对象。然后我们在这个模板中可以使用let-变量这个模板输入变量来获取上下文对象中的值，这个模板更具灵活性。

应用场景

类似于ng-zorro这个框架的分页组件Pagination（官网链接）。如果我们对默认上一页和下一页的样式或者结构不满意，想要自己调整的话，我们可以提供一个输入属性（@Input定义的属性）,来接收一个模板，并且为其提供所必须的属性或者方法。这样的话，我们就可以在不修改组件源码的情况下实现组件的复用。

Demo

我们先定义一个子组件HeroDisplayCard，角色的展示界面

@Component({
  selector:'app-hero-display-card',
  template:`
    角色列表
    
      
        
          角色id：{{h.id}}--
          角色名字：{{h.name}}--
          角色属性：{{h.features}}
        

      
    
  `,
  styles:[
    `.hero-card-box{
      width: 600px;
      margin: 10px auto;
    }
    .hero-card-item{
      list-style: none;
    }
    `
  ]
})
export class HeroDisplayCard {
  public heroesList = [
    {id:'013',name:'钟离',features:'rock'},
    {id:'061',name:'烟绯',features:'fire'},
    {id:'022',name:'迪奥娜',features:'ice'},
    {id:'004',name:'诺艾尔',features:'rock'},
  ]
}

然后将这个组件引入一个父组件当中：

@Component({
  selector:'app-templateoutlet-app-demo',
  template:`
    
  `
})
export class TemplateOutletAppDemoComponent {}

代码运行一下，效果如图：

我觉得这个li的样式实在是太丑了，而且顺序也不太对。我希望把角色属性调到角色名字之前。这样的话，如果只是单纯的通过输入属性来更改样式的话就会变得很麻烦，我们可能需要定义非常多的变量来供使用者选择，这样的话有点得不偿失。那么我们何不直接提供一个模板给使用者，我们只需要提供必要的数据就可以了。样式，排版这些自由交给使用者。

那么对于子组件HeroDisplayCard我们可以这么改：

@Component({
  selector:'app-hero-display-card',
  template:`
    角色列表
    
      
        
        
          
            角色id：{{h.id}}--
            角色名字：{{h.name}}--
            角色属性：{{h.features}}
          

        
        
        
		  
          
        
      
    
  `,
  styles:[ //省略 ]
})
export class HeroDisplayCard {
  @Input() cardItemTemplate:TemplateRef;
  public heroesList = [ // 省略]
}

然后我们在父组件中将自定义的模板传入进去：

@Component({
  selector:'app-templateoutlet-app-demo',
  template:`
    
	
    
      
        
角色id：{{id}}
        
角色属性：{{features}}
        
角色名字：{{name}}
      
    
  `,
  styles:[
    //在这里写自定义模板的样式  
    `.hero-card-custom-item{
      width: 100%;
      height: 35px;
      border: 1px solid #999999;
      border-radius: 5px;
      display: flex;
      justify-content:space-around;
      align-items: center;
      margin: 10px 0;
    }
    .hero-card-custom-item p {
      width: 30%;
      margin: 0;
      font-size: 20px;
      color: #666666;
    }
    .hero-card-custom-item p span {
      color: red;
    }`
  ]
})
export class TemplateOutletAppDemoComponent {}

然后运行一下，效果如图（其实还是很丑）：

总结

使用NgTemplateOutlet这个结构性指令可以增强我们子组件的封装程度，避免需要定义大量的输入属性，导致父组件的模板看起来臃肿不堪。

上述就是小编为大家分享的Angular中NgTemplateOutlet指令的理解和用法是什么了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注创新互联行业资讯频道。