<ng-content></ng-content>学习小记

最新推荐文章于 2024-09-04 18:16:57 发布
原创 最新推荐文章于 2024-09-04 18:16:57 发布 · 532 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#angularjs2

本文介绍如何通过Angular中的ng-content指令实现组件内容的投影和复用，从而提高开发效率并保持代码整洁。

这里写图片描述

以上一黑一白两个组件 他们相同的部分是
这里写图片描述

那么我们就可以利用 ng-content来将不一样的地方变换掉

NG Ng-content（内容映射）
SeriousLose
11-22 2819
ng-content ng-content是内容映射指令(也叫内容嵌入)，内容映射指的是在组件中嵌入模板代码，方便定制可复用的组件，很好地扩充组件的功能，方便代码的复用。 ng-content中的组件组件只被实例化了一次 - 从未被销毁和重新创建； 即ngOnInit() 只执行一次 <ng-content> 不会...
Linux环境下kettle集群部署小记（本文部署一主三从服务器）
KimballYue的博客
01-10 993
kettle集群的部署已过了很长时间，今天突然想总结下部署过程，方便后人和自己以后部署方便。 一、运行环境 kettle众所周知是Java开发的开源项目，故kettle需要java环境，正常大型项目可能需要用到kettle的资源库配置，故需要一台数据库服务器，里面单独建立kettle的资源库（后面配置会用到），仅此而已。 二、配置文件 无论是主机还是从机都...
Angular开发实践（八）： 使用ng-content进行组件内容投射
weixin_30871905的博客
04-05 423
在Angular中，组件属于特殊的指令，它的特殊之处在于它有自己的模板（html）和样式（css）。因此使用组件可以使我们的代码具有强解耦、可复用、易扩展等特性。通常的组件定义如下： demo.component.ts： import { Component, OnInit } from '@angular/core'; @Component({ selector: 'demo-comp...
Angular 进阶之 一： Projection (ng-content)
KenkoTech的博客
01-14 1085
在开发一个前端程序时，肯定会有很多相似的逻辑或布局，这时就需要提取公共组件或样式来尽可能的复用代码。在angular中，提供了ng-content来更方便的编写组件和布局。 ng-content在一个Angular组件中的view层起到的作用类似于占位符。外部内容被投射进当前组件，替代ng-content的位置，另：不管是否存在外部内容ng-content都不会被渲染到页面中。 主要作用及特点： 在组件中嵌入内容 在组件中嵌入模板代码 select属性支持css选择器（”#id”,”...
ng-content、ng-container、ng-template使用区别
小妖666个人笔记
12-14 1866
一、ng-content <ng-content>是内容映射，所谓内容映射，是指在组件内嵌入模版代码，方便定制可复用的组件。 以<app-child>这个子组件为例。 父组件：home.component.html <div style="background: darkgoldenrod;">父组件 <app-child> ...
Angular2 ng-content 在组件中嵌入内容
snowflake_的博客
04-09 1850
Angular2 ng-content 在组件中嵌入内容<ng-content select="menu"></ng-content>用ng-content标签，将父组件模板中包含的menu标签内容加到指定位置。select属性支持css选择器， Class field decorators for directives and components import {Input, …} fr
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>个人简历</title> </head> <body> <div class="box"> <div class="header"> <div class="top"></div> <div class="nav"> <ul> <li><a href="">我的首页</a></li> <li><a href="one.html">我的爱好</a></li> <li><a href="two.html">我的小记</a></li> </ul> </div> </div> <div class="con"> <div class="conbox"> <div class="xinxi"> <ul> <li><h2>我的个人信息 </h2></li> <li>姓名：XXX</li> <li>学号:201742403626</li> <li>家乡：内蒙古自治区</li> <li>就读学校：吉林动画学院</li> </ul> <img src="picture/b.jpg" alt="" class="you"> </div> <div class="ptxt"> <p>所有的结局都已写好<br> 所有的泪水也都已启程<br> 却忽然忘了是怎麽样的一个开始<br> 在那个古老的不再回来的夏日<br> </p> <p>无论我如何地去追索<br> 年轻的你只如云影掠过<br> 而你微笑的面容极浅极淡<br> 逐渐隐没在日落後的群岚<br></p> <p>遂翻开那发黄的扉页<br> 命运将它装订得极为拙劣<br> 含著泪 我一读再读<br> 却不得不承认<br> 青春是一本太仓促的书<br></p> </div> </div> <div class="wenhua"> <img src="picture/d1.jpg" alt=""> <img src="picture/d2.png" alt=""> <img src="picture/d3.jpg" alt=""> </div> </div> <div class="footer"> <p>欢迎来到我的个人网页</p> </div> </div> </body> </html> 帮我联系以上内容接着写出css
最新发布
09-09
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>个人简历</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>个人简历</h1> <section> <h2>基本信息</...
angular7 + ng-zorro-antd 开发问题小记
Wu_shuxuan的博客
05-16 3307
1、通过ip地址访问同一局域网下已经启动的angular项目 ng serve --host 192.168.1.136（ip地址）
<select id="selectCardKeyInfoList" parameterType="CardKeyInfo" resultMap="CardKeyInfoResult"> <include refid="selectCardKeyInfoVo"/> <where> <if test="cardKey != null and cardKey != ''"> and card_key = #{cardKey}</if> <if test="cardType != null "> and card_type = #{cardType}</if> <if test="deviceId != null and deviceId != ''"> and device_id = #{deviceId}</if> <if test="cardActivationTime != null "> and card_activation_time = #{cardActivationTime}</if> <if test="cardExpireTime != null "> and card_expire_time = #{cardExpireTime}</if> <if test="cardGenerateTime != null "> and card_generate_time = #{cardGenerateTime}</if> <if test="cardUpdater != null "> and card_updater = #{cardUpdater}</if> <if test="cardUpdateTime != null "> and card_update_time = #{cardUpdateTime}</if> <if test="cardCreator != null "> and card_creator = #{cardCreator}</if> </where> </select> Error attempting to get column 'card_key' from result set. Cause: java.sql.SQLDataException: Cannot determine value type from string 'IddCBY' ; Cannot determine value type from string 'IddCBY'; nested exception is java.sql.SQLDataException: Cannot determine value type from string 'IddCBY'
08-17
[^3]: 阿杰小记：Mybatis报错Cannot determine value type from string ‘1,000.00’</think>### 解决 MyBatis "Cannot determine value type from string" 异常 #### 问题原因分析 该异常发生在 MyBatis 尝试将...
＜Project-1 rss_to_csv＞ Python Coding Flask应用: 读取华尔街日报RSS 在浏览器中显示 在QNAP Container/docker 运行
davenian的博客
09-04 1321
wsj 提供了多个RSS源，汇总到一个表是目标。因为是英文，为了便于速读，我把题目Titile与汇总Summary 做了双语显示（原+中）在捕捉内容时，同时翻译，一同存入csv文件。
[Angular] 笔记 20：NgContent
学习笔记
12-30 1230
chatgpt:在Angular中，NgContent是用于内容投影（Content Projection）的一个重要概念。它允许你在一个组件中插入内容，并将这些内容投影到另一个组件中。当你在一个组件中使用标签时，它充当了一个插槽，可以让你在组件的模板中插入任意HTML内容。这样做的好处是，你可以在组件内部定义模板结构，并允许外部使用该组件时灵活地插入内容，而不是固定在组件内部。举个例子，假设有一个组件，你希望能够在模态框中放置自定义的内容，而不是在组件内部硬编码。你可以在组件的模板中使用。
angular :host_Angular之 ng-content 进阶
weixin_39983912的博客
10-30 203
阅读此文章需要掌握Angular组件的知识。本文所有的例子都可以在kingfolk/Angular-Playground找到。简单的ng-content使用ng-content可以创建类似于div span等内部可以插入元素的组件，比如下面的app-ng-content-simple他的作用和span一样@Component利用select插入不同种类的内容ng-content指令有一个selec...
angular 之 ng-template、ng-container、ng-content区别及使用
qq564280420的博客
12-16 2657
ng-template 定义一个模板-默认不渲染 列表渲染例子-效果图 html <div *ngFor="let person of persons;"> <div>姓名: {{person.name}}</div> <!-- 通过 ngTemplateOutlet 指令输出template的内容 context 可以给模板传递数据, $implicit 为默认的数据 --> <!-- ng-container 进行占位且不渲染具体的标签
anaconda出现问题WARNING: The conda.compat module is deprecated and will be removed in a future release.
qq_41904729的博客
09-22 2141
WARNING: The conda.compat module is deprecated and will be removed in a future release.是conda4.6.11版本出现的特殊bug，需要先升级conda版本 终端输入conda update conda 开始自动更新，在process处选择y，让其继续更新，更新完再查看conda --version 版本更...
吴恩达Coursera深度学习课程 DeepLearning.ai 编程作业——Tensorflow+tutorial（2-3）
Hansry的博客
11-21 7632
TensorFlow TutorialWelcome to this week’s programming assignment. Until now, you’ve always used numpy to build neural networks. Now we will step you through a deep learning framework that will allow yo
[Warning] '--default-character-set' is deprecated and will be removed in a future release
langkeziju的专栏
11-18 8412
启动mysql服务器时报错：(mysql版本5.1.56)   C:\Program Files\MySQL>mysqld 121022 12:40:20 [Warning] '--default-character-set' is deprecated and will be removed in a future release. Please use '--character-set-s
@@tx_isolation is deprecated and will be removed in a future release.Please use '@@transacti :bug修复
渣渣灰
05-22 9036
@@tx_isolation is deprecated and will be removed in a future release.Please use '@@transaction_isolation' instesd # 翻译 @@tx_isolation被禁止使用并且在未来的版本中会被移除，请使用'@@transaction_isolation'代替 申明这bug是针对数...
解决DeprecationWarning: threshold_ attribute is deprecated in 0.20 and will be removed in 0.22.
人的抱怨源自，自我无能的愤怒
10-09 6383
在程序中的输出往往会有一些警告和提示，但是期待输出整洁简单，直接忽略这些警告。 解决类似的XXXWarning，在不影响整体的代码结构与功能的情况下通过 import warnings warnings.filterwarnings("ignore") 来过滤掉相关的警告提示。除非在Console需要输出整洁，否则不建议采用此方法，因为警告和提示会告知程序某些地方版本需要更新或者某些地方需要完善。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值