angular5 ng-content使用方法

先自定义一个组件import { Component } from '@angular/core';@Component({selector: 'exe-greet', template: ` <div class="border"> <p>Greet Component</p>  <ng-content></ng-content> </div> `, styles: [` .border { border: 2px solid #eee; } `] }) export class GreetComponent { }

另一个父组件

import { Component } from '@angular/core';@Component({selector: 'my-app', template: ` <h4>Welcome to Angular World</h4> <exe-greet>  <p>Hello Semlinker</p> </exe-greet> `, }) export class AppComponent { }

exe-greet指令使用时是<exe-greet></exe-greet>中间没有内容的，如果中间想要放不同内容，可使用ng-content占位符占位

由此可见ng-content是代指使用组件时内部的东西

除此之外ng-content　还有一个select属性

import { Component } from '@angular/core';@Component({selector: 'exe-greet', template: `

<div style="border: 1px solid #666;margin: 4px;"><div style="border: 1px solid red;margin: 5px;"> <ng-content select="header"></ng-content> </div> <div style="border: 1px solid green;margin: 5px;"> <ng-content select=".card_body"></ng-content> </div> <div style="border: 1px solid blue;margin: 5px;"> <ng-content select="footer"></ng-content> </div> </div>

`, styles: [` .border { border: 2px solid #eee; } `] }) export class GreetComponent{ }

import { Component } from '@angular/core';@Component({selector: 'my-app', template: ` <h4>Welcome to Angular World</h4>  <exe-greet> <header>Card Header</header> <div class="card_body">Card Body</div> <footer>Card Footer</footer> </exe-greet> `, }) export class AppComponent { }

转载于:https://www.cnblogs.com/mttcug/p/8004447.html

angular5 ng-content使用方法相关推荐

dede首页调用栏目内容{dedefield.content}的方法
Dedecms的功能确实很强大,但是dedecms的全局变量有字节限制,使得我们在使用dedecms制作企业站的时候,首页无法调用大段大段的企业站. 其实dedecms还有另外一种调用大段内容的方法, ...
ng 无法加载文件 C:\Users\hl\AppData\Roaming\npm\ng.ps1 解决方法
错误提示: 一.我们在win10 系统中有一个搜索框输入 Windos PowerShell noted: 一定要选择管理员身份运行二.打开了命令行之后,输入 set-ExecutionPoli ...
“XML declaration should precede all document content“解决方法
转载:https://blog.csdn.net/weixin_43495948/article/details/102995677 xml格式第一行不能空!!!
python中的content方法_content最新:python计算Content-MD5并获取文件的Content-MD5值方式_爱安网 LoveAn.com...
关于"content"的最新内容聚合阅读这篇文章主要介绍了python计算Content-MD5并获取文件的Content-MD5值方式,具有很好的参考价值,希望对大家有所帮助 ...
NG Ng-content（内容映射）
ng-content ng-content是内容映射指令(也叫内容嵌入),内容映射指的是在组件中嵌入模板代码,方便定制可复用的组件,很好地扩充组件的功能,方便代码的复用. ng-content中的组件 ...
python3 requests content和text 区别
目录区别介绍例子1 中文问题例子2:保存图片区别介绍一直在想requests的content和text属性的区别,从print 结果来看是没有任何区别的 response = request ...
文件写入的6种方法，这种方法性能最好
在 Java 中操作文件的方法本质上只有两种:字符流和字节流,而字节流和字符流的实现类又有很多,因此在文件写入时我们就可以选择各种各样的类来实现.我们本文就来盘点一下这些方法,顺便测试一下它们性能,以 ...
java 邮件附件_java中javamail发送带附件的邮件实现方法
本文实例讲述了java中javamail发送带附件的邮件实现方法.分享给大家供大家参考.具体分析如下: JavaMail,顾名思义,提供给开发者处理电子邮件相关的编程接口.它是Sun发布的用来处理em ...
[转载] Python3.0中普通方法、类方法和静态方法的比较
参考链接: Python中的类方法与静态方法一.语法区别刚接触Python中的面向对象,对于类方法和静态方法难以区分,通过查找知乎.CSDN论坛,废了好大的劲思路才逐渐明朗,所以就总结顺便分享一下 ...
thinkphp中mysql添加数据_thinkphp添加数据 add()方法
thinkphpz内置的add()方法用于向数据库表添加数据,相当于SQL中的INSERT INTO 行为添加数据 add 方法是 CURD(Create,Update,Read,Delete / ...

angular5 ng-content使用方法

angular5 ng-content使用方法相关推荐

最新文章

热门文章