angular6.x中ngTemplateOutlet指令的使用

suxier 发布于2019-08-23 10:52 / 2943人阅读

摘要：在使用进行开发的时候通过属性绑定向组件内部传值的方式有时候并不能完全满足需求比如我们写了一个公共组件但是某个模板使用这个公共组件的时候需要在其内部添加一些标签内容这种情况下除了使用预先在组件内部定义之外就可以利用指令向组件传入内容指令类似于

在使用angular进行开发的时候,通过属性绑定向组件内部传值的方式,有时候并不能完全满足需求,比如我们写了一个公共组件,但是某个模板使用这个公共组件的时候,需要在其内部添加一些标签内容,这种情况下,除了使用ngIf/ngSwitch预先在组件内部定义之外,就可以利用ngTemplateOutlet指令向组件传入内容.

ngTemplateOutlet指令类似于angularjs中的ng-transclude,vuejs中的slot.

ngTemplateOutlet是结构型指令,需要绑定一个TemplateRef类型的实例.

使用方式如下:

@Component({
  selector: "app",
  template: `
    Angular"s template outlet and lifecycle example
    
    
      Hello {{name}}!
      
    
  `,
})
export class App {}
@Component({
  selector: "app-content",
  template: `
    
    
  `,
})
export class Content {
  display = false;
  @Input() templateRef: TemplateRef;
  myContext = {$implicit: "World", localSk: "Svet"};
}
@Component({
  selector: "app-nested-component",
  template: `
    Hello World!
  `,
})
export class NestedComponent implements OnDestroy, OnInit {
  
  ngOnInit() {
    alert("app-nested-component initialized!");
  }
  
  ngOnDestroy() {
    alert("app-nested-component destroyed!");
  }
  
}

代码中除了根组件外定义了两个组件

容器组件:app-content

传递进去的内容组件:app-nested-component

app-content组件接收一个TemplateRef类型的输入属性templateRef,并在模板中将其绑定到了ngTemplateOutlet指令,当组件接收到templateRef属性时,就会将其渲染到ngTemplateOutlet指令所在的位置.

上例中,app-content组件templateRef属性的来源,是在根组件的模板内,直接通过#符号获取到了app-nested-component组件所在的引用并传入的.

在实际应用中,除了这种方式,也可以直接在组件内部获取TemplateRef类型的属性并绑定到ngTemplateOutlet指令.

比如在容器组件为模态框的情况下,并不能通过模板传值,就可以使用下面这种方式:

 @ViewChild("temp") temp: TemplateRef

 openDialog(){
   this.dialog.open(ViewDialogComponent, {data: this.temp)
 }

在容器组件中还可以定义被传递内容的上下文(上例app-content组件中的myContext属性),其中的$implicit属性作为默认值,在被传递的内容中可以以重命名的方式访问(上例let-name),对于上下文中其他的属性,就需要通过let-属性名的方式访问了.

专线服务超融合服务器 linux中的使用指令使用方法 ios中sqlite的使用 java中二维数组的使用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96774.html

[译] 探索 Angular 使用 ViewContainerRef 操作 DOM

摘要：在探索抽象类前，先了解下如何在组件指令中获取这些抽象类。下面示例描述在组建模板中如何创建如同其他抽象类一样，通过属性绑定元素，比如上例中，绑定的是会被渲染为注释的元素，所以输出也将是。你可以使用查询模板引用变量来获得抽象类。原文链接：Exploring Angular DOM manipulation techniques using ViewContainerRef如果想深入学习 ...

wind5o 2019-08-22 15:33 评论0 收藏0
初探Angular6.x---用户列表与用户详情

摘要：初探用户列表与用户详情在上一篇博文进入用户编辑中我们分享了属性名称和这两个表达式的运用我们已经可以将表单里的修改与我们展示出来的值进行同步今天我们来学习在中如何展示一个列表在项目里列表展示可以说是非常普遍的一个需求了几乎有展示数　　初探Angular6.x---用户列表与用户详情　　在上一篇博文《Angular6.x---进入用户编辑》中,我们分享了{{属性名称}}和[(ngMod...

helloworldcoding 2019-08-19 10:59 评论0 收藏0
初探Angular6.x---主从组件

摘要：在上一篇博文用户列表与详情展示中我们用实现了用户列表的展示并通过语法实现了列表单击时将单击的对象传到后台的功能最后为了防止初次加载对象为空导致的错误我们又使用了语法来对要展示的详情对象进行判空操作但随着后续模块的增多以及业务的交叉我们　　　在上一篇博文《Angular6.x---用户列表与详情展示》中,我们用ngFor=let object of list实现了用户列表的展示,并通过...

FingerLiu 2019-08-19 11:06 评论0 收藏0
angular(angular6/angular7/angular8) delete请求body的问

摘要：中请求，不接受，只需将其放在对象中即可在，，及以上版本中修改如下在中修改如下这样请求就可以携带 angular中httpclient delete请求，不接受body，只需将其放在options对象中即可在 angular6.x ，angular7.x， angular8.x及以上版本中修改如下: const options = { headers: new HttpHeader...

gggggggbong 2019-08-26 10:49 评论0 收藏0
angular6根据environments配置文件更改开发所需要的环境

摘要：前端开发过程中，我们常常需要根据需求去运行或者打包不同环境的代码，幸运的是，给我们提供了配置，但是的配置方式和的其他版本的配置方式是有所不同的，下面我就分别介绍在测试预生产环境下实现配置。前端开发过程中，我们常常需要根据需求去运行或者打包不同环境的代码，幸运的是，angular给我们提供了environments配置，但是angular6.x的配置方式和angular的其他版本的配置...

seasonley 2019-08-23 15:39 评论0 收藏0