浅谈Angular2 ng-content 指令在组件中嵌入内容

ng-content指令可以在组件中嵌入模板代码，方便定制可复用的组件。

比如：页面的header是个通用组件，导航菜单样式已经设定好，只需在header标签内加上菜单内容。

用ng-content标签，将父组件模板中包含的menu标签内容加到指定位置。select属性支持css选择器，如:"#id",".class","[name=value]"等

header组件的模板:

<p>
 {{title}}
</p>
<p><input type="checkbox" name="cb" [(ngModel)]="isChecked" (click)="toggle()" />Checkbox <br /></p>
<ng-content select="menu"></ng-content>

父组件使用方法：

<app-header #header [title]="title" name="{{name}}" (checkEmitter)="onCheckedChange($event)" >
 <menu>
  <ul>
   <li>aa</li>
   <li>bb</li>
   <li>cc</li>
  </ul>
 </menu>
</app-header>
<app-header #header2 [title]="title2" name="{{name}}" (checkEmitter)="onCheckedChange($event)" ></app-header>
<button (click)="header.toggle()">通过本地变量调用子组件方法</button>
<button (click)="headerToggle()">通过ViewChild调用子组件方法</button>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 浅谈angular4 ng-content 中隐藏的内容

    如果你尝试在 Angular 中编写可重复使用的组件,则可能会接触到内容投射的概念.然后你发现了 <ng-content> ,并找到了一些关于它的文章,进而实现了所需的功能. 接下来我们来通过一个简单的示例,一步步介绍 <ng-content> 所涉及的内容. Simple example 在本文中我们使用一个示例,来演示不同的方式实现内容投影.由于许多问题与Angular 中的组件生命周期相关,因此我们的主要组件将显示一个计数器,用于展示它已被实例化的次数: import { C

  • 浅谈Angular2 ng-content 指令在组件中嵌入内容

    ng-content指令可以在组件中嵌入模板代码,方便定制可复用的组件. 比如:页面的header是个通用组件,导航菜单样式已经设定好,只需在header标签内加上菜单内容. 用ng-content标签,将父组件模板中包含的menu标签内容加到指定位置.select属性支持css选择器,如:"#id",".class","[name=value]"等 header组件的模板: <p> {{title}} </p> <

  • 浅谈angular2 组件的生命周期钩子

    浅谈angular2 组件的生命周期钩子

    本文介绍了浅谈angular2 组件的生命周期钩子,分享给大家,具体如下: 按照生命周期执行的先后顺序,Angular生命周期接口如下所示 名称 时机 接口 范围 ngOnChanges 当被绑定的输入属性的值发生变化时调用,首次调用一定会发生在 ngOnInit之前. OnChanges 指令和组件 ngOnInit 在第一轮 ngOnChanges 完成之后调用. ( 译注:也就是说当每个输入属性的值都被触发了一次 ngOnChanges之后才会调用 ngOnInit ,此时所有输入属性都已

  • 浅谈angular2子组件的事件传递(任意组件事件传递)

    angular2子组件的事件传递 angular2有很多组件组成,画面由很多路由,导致事件的传递很"笨拙",本组的技术负责人发现了任意组件传递事件的这个方法,教会了我,我做个笔记. 项目情况: 画面结构复杂,路由数目偏多,组件数目多,嵌套复杂.业务要求:任何出现人名的地方,点击人名,直接打开和这个人的聊天画面 以前用angular2官网给的烹饪技巧基本解决90%的需求,当然这个如果是用Input,Output也可以,但是那样的话,结构将是混沌状态. 附:angluar2的组件通讯的传送

  • 浅谈angular2的http请求返回结果的subcribe注意事项

    实例如下: this.monitorSer.getVehicleLonAndLat(vehicleIds) .subscribe( data => { //将data下的data字符串转化为vehdata数组 this.vehData=JSON.parse(data.data); //功能实现 this.loadOverLay(); }, error => this.errorMessage = <any>error );//错误处理 subscribe()异步处理,如果需要用返回

  • 浅谈vue 锚点指令v-anchor的使用

    如下所示: export default { inserted: function(el, binding) { el.onclick = function() { let total; if (binding.value == 0) { total = 0; } else { total = document.getElementById(`anchor-${binding.value}`).offsetTop; } let distance = document.documentElemen

  • 浅谈vue使用axios的回调函数中this不指向vue实例,为undefined

    今天在vue-cli脚手架搭建的项目中使用axios时,遇到无法解析this.$route的报错信息,最后发现是作用域的问题. 1.解决方法:使用 => 原代码: axios.get('/user', { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); 修改为: axios.get('/u

  • 浅谈do {...} while (0) 在宏定义中的作用

    如果你是一名C程序员,你肯定很熟悉宏,它们非常强大,如果正确使用可以让你的工作事半功倍.然而,如果你在定义宏时很随意没有认真检查,那么它们可能使你发狂,浪费N多时间.在很多的C程序中,你可能会看到许多看起来不是那么直接的较特殊的宏定义. 下面就是一个例子: #define __set_task_state(tsk, state_value) \ do { (tsk)->state = (state_value); } while (0) 在Linux内核和其它一些著名的C库中有许多使用do{..

  • 浅谈Java 将图片打包到jar中的路径问题

    Eclipse使用导出Jar包后打开加载不了图像? 出现这种问题的原因大多是因为路径的问题,往往是在项目中运行正常,但是一旦打包成Jar后就不能正常显示了,下面总结一下解决此类问题的方法: 一.通过使用外部资源文件的方式解决 把项目打包生成Jar后,再新建一文件夹,把项目中所有使用的图片文件和生成Jar文件放在该目录下,只要代码对图片文件的引用路径正确,如:ImageIcon image=new ImageIcon(SwingResourceManager.getImage("icons/log

  • 浅谈如何使用vb.net从数据库中提取数据

    1.设置从Model中的Sub Main 启动 2.程序结构 3.Model1 Imports System.Windows.Forms.Application Module Module1 Sub Main() 'form1 是测试多文档窗口 'Dim frm1 As New Form1() 'frm1.Show() Dim formStudentSysMain As New FormStudentSysMain() formStudentSysMain.Show() Do While Tru

  • 浅谈java运用注解实现对类中的方法检测的工具

    创建自定义注解 @Retention(RetentionPolicy.RUNTIME) @Target(ElementType.METHOD) public @interface Test { } 建立测试类 public class UserTest { @Test public void testInsert() { User user = null; System.out.println(user.getUsername()); } @Test public void testQuery(

随机推荐