嵌套在ng-content中的目标组件
是指在Angular框架中，通过使用ng-content指令将一个组件的内容插入到另一个组件中的特定位置。ng-content指令允许在父组件中定义插槽，然后在子组件中将内容插入到这些插槽中。
嵌套在ng-content中的目标组件的主要作用是实现组件的复用和灵活性。通过将内容插入到父组件中的特定位置，可以在不修改父组件的情况下改变子组件的显示内容。这种方式可以使组件更加灵活，可以根据不同的需求在不同的上下文中使用。
嵌套在ng-content中的目标组件可以应用于各种场景，例如：
- 布局组件：可以将头部、底部、侧边栏等组件作为插槽，实现不同布局的页面。
- 模态框组件：可以将模态框的标题、内容、按钮等作为插槽，实现不同样式和功能的模态框。
- 表单组件：可以将表单的输入框、按钮等作为插槽，实现不同类型的表单。
腾讯云提供了一系列与云计算相关的产品，以下是一些推荐的产品和其介绍链接：
- 云服务器（CVM）：提供可扩展的计算能力，支持多种操作系统，适用于各种应用场景。详细介绍请参考：https://cloud.tencent.com/product/cvm
- 云数据库MySQL版（CDB）：提供高性能、可扩展的MySQL数据库服务，支持自动备份和容灾。详细介绍请参考：https://cloud.tencent.com/product/cdb_mysql
- 云存储（COS）：提供安全可靠的对象存储服务，适用于存储和处理各种类型的数据。详细介绍请参考：https://cloud.tencent.com/product/cos
- 人工智能（AI）：提供丰富的人工智能服务，包括图像识别、语音识别、自然语言处理等。详细介绍请参考：https://cloud.tencent.com/product/ai
- 物联网（IoT）：提供全面的物联网解决方案，包括设备接入、数据管理、应用开发等。详细介绍请参考：https://cloud.tencent.com/product/iot
需要注意的是，以上推荐的产品仅代表腾讯云的一部分云计算产品，还有其他产品可以根据具体需求进行选择。
相关·内容
我的想法是让基本组件提供一些功能，并根据需要添加matSuffix和<mat-hint>选项。组件HTML是：
<mat-form-field>
<textarea matInput matTextareaAutosize matAutosizeMinRows="1" matAutosizeMaxRows="3"
[placeholder]="placeholder" [formControl]="inputField"></textarea>
<ng-cont
浏览 0提问于2018-05-29得票数 6
回答已采纳
1回答
我有个问题。我有一个组件，在其中声明一个输入。
@Input() isOverlay: boolean
我有一个像这样的模板html：
<ng-template *ngIf="isOverlay" cdkConnectedOverlay [cdkConnectedOverlayOrigin]="trigger" [cdkConnectedOverlayOpen]="active">
<div class="context-menu__header">
<strong>{{
浏览 9提问于2022-09-05得票数 0
我使用组件显示了以下JSON结构：
const rootBlock = {
id: 1,
fields: [],
blocks: [{
id: 2,
fields: []
blocks: []
}]
} as Block;
有组件BlockComponent。
@Input() block: Block;
我想显示所有嵌套组件在一个，如何使用投影？
<app-block>
<app-block></app-block>
</app-block>
浏览 3提问于2020-08-07得票数 0
回答已采纳
我试图加载不同的“父”组件，并通过在每个父组件中以ng-content为目标将路由内容注入到这些不同的父组件中。本质上，每个父组件都根据设备宽度(小/可移动、中型/平板和大型/桌面)处理导航和其他样板组件。
为我的应用程序中的每个路由生成的内容需要被屏蔽(注入)到父组件。每个路由的内容使用ng-content针对特定的注入点。
我可以使用<ng-container *ngComponentOutlet="ResponsiveComponent;"></ng-container>交换父组件。问题是，我的路由生成的内容没有被注入到每个父组件中的目标ng-co
浏览 8提问于2017-07-23得票数 5
回答已采纳
我正在构建一个角的头组件，并希望根据输入inputTwoRows是否设置为true/false来显示DOM结构中不同位置的导航。nav通过内容投影- ng-content添加到标题的模板中。我尝试在模板中的不同位置将2 ng-content包装在ng-templates中，并添加了ngIf以有条件地显示它们。然而，模板试图显示相同的预计内容。正如您将在Stackblitz链接中看到的那样，如果在ng-content上显示[twoRows]="true"，则只显示第一个c-header。下面是header.component.html的代码
<header>
浏览 9提问于2022-07-27得票数 1
1回答
角包装角材料标签组件与自定义组件
、、、、
我在这里试图实现的是，我想在我的共享组件中用角材料标签组件包装。
下面是我试图包装的组件：
PS：我可以在每个选项卡中显示组件：
<mat-tab-group>
<mat-tab label="First"> Content 1 </mat-tab>
<mat-tab label="Second"> Content 2 </mat-tab>
<mat-tab label="Third"> Content 3 </mat-tab>
</mat-ta
浏览 3提问于2021-06-22得票数 7
我有一个带有动态创建组件的App组件。父组件有一个<ng-content>元素，因此我们可以在父组件中投影我们的子组件。
App组件：
@Component({
selector: 'my-app',
template:`<ng-container #parentcontainer></ng-container>`,
})
父组件：
@Component({
selector: 'parent',
template: `
<ng-container #container></ng-cont
浏览 0提问于2018-04-24得票数 4
回答已采纳
我试图使用Ng-Content，但它似乎不起作用。完整的代码在柱塞器中。
@Component({
selector: 'my-app',
template: `
<div>
<h2>Hello {{name}}</h2>
<div>
Title:
<ng-content select=".my-component-title"></ng-content>
</div>
<div
浏览 3提问于2016-11-21得票数 1
回答已采纳
我有两个模块，根据当前状态，向播放器显示一条消息。如何避免重复第一和第二模块中的消息输出代码？也许我可以在文件app.component.html中用消息模板做一次呢？或者你能想出或知道实现这个目标的另一种方法吗？提前感谢大家的回答和帮助。
也许我可以用类似于这个json的东西？但是请记住，页脚是一个组件。
MESSAGE_INIT: {
title: 'Wait',
body: {
default: 'Please wait ...',
},
footer: WAITING_DOTS_COMPONENT
}
MESSAGE_DEPLOY: {
浏览 6提问于2022-04-25得票数 0
1回答
在角度2中，我有一个组件的层次结构。然而，在树中，我需要显示另一个与对象层次结构解耦的元素。它将是一个旋转部件。不知何故它不想出现。
<parent>
<child>
<grandchild>
<spinner></spinner>
</grandchild>
<child>
</parent>
parent在模板中包含了child，
child在模板中包括grandchild。
grandchild没有在模板中包括
浏览 2提问于2016-10-14得票数 2
回答已采纳
我有一个根组件app-document-form，它迭代对象documentBlock的子元素。
<ng-container *ngFor="let element of documentBlock?.children"> <!-- This is important part -->
<app-adresat-list *ngIf="element.tag === 'ADRESAT'" [parentBlock]="documentBlock"></app-adresat-li
浏览 3提问于2020-08-13得票数 0
回答已采纳
ng含量在角ngSwitch情况下不起作用.ng-以下代码的内容仅在默认情况下工作，而在其他情况下不起作用。
<ng-container [ngSwitch]="variant">
<button *ngSwitchCase="variantType.SUCCESS">
<ng-content></ng-content>
</button>
<button *ngSwitchCase="variantType.WARNING">
浏览 4提问于2022-11-15得票数 0
回答已采纳
我正在通过来理解angular 2的ng-content。我想捕获在ng-content上触发的事件。我有以下组件：
@Component({
moduleId: module.id,
selector: 'card',
template: `
<ng-content (click)="onClick($event)"></ng-content>
`
})
export class CardComponent {
onClick(){
console.log('cl
浏览 12提问于2017-03-02得票数 12
2回答
组件包内的角度获取内容
、、、
我正在搜索如何在组件调用中获取内容。有办法弄到吗？
<my-component>get what is here inside in my-component</my-component>
<my-select [list]="LMObjects" [multiple]="true">{{MyObject.MyName}}</my-select>
它会产生
<mat-form-field>
<mat-select multiple="@InputMultiple">
浏览 4提问于2022-09-15得票数 -1
我正在编写组件来帮助实现语义UI元素。我的‘<ng-content>’元素的模板包含几个卡片元素，用于转换卡片的特定部分。由于Semantic-UI的CSS的特殊性，我希望将类名应用于一些transclusions的根元素。我曾尝试使用指定了类的包装器元素，但由于CSS规则的嵌套不正确，这导致了子元素中的一些错误。
此时的组件模板：
<div class="image" *ngIf="image">
<img src="{{image}}">
</div>
<div class="
浏览 1提问于2017-12-06得票数 0
4回答
我简化的目标是构建一个组件，它是一个带有项模板的列表。例如：
<list>item</list>
这是我的代码：
import {bootstrap} from 'angular2/platform/browser';
import {Component} from 'angular2/core';
@Component({
selector: 'list',
template: `
<ul>
<li *ngFor="let i of items" >
浏览 7提问于2016-04-29得票数 37
回答已采纳
1回答
尝试用不同的模板使用相同的组件
、、、、
我试图在应用程序中的两个不同地方使用一个functionality.，但是我想要更改template并保留这个template
在一种情况下，我想使用component作为button。
在另一种情况下，我想使用component作为list item。
所有的一切都是相同的，只是template的变化，我想知道是否有任何方法可以做到这一点，而不使用if内部仅仅通过扩展component或其他更干净的东西。
一些代码：
<ng-container [ngSwitch]="status">
<button *ngSwitchCase=&
浏览 3提问于2019-12-20得票数 4
回答已采纳
1回答
在中，使用@ContentChildren装饰器检索来自以下布局的@ContentChildren：
<ng-content select="card-header"></ng-content>
<ng-content select="card-body"></ng-content>
<ng-content></ng-content>
<ng-content select="card-footer"></ng-content>
这是获得
浏览 5提问于2022-11-17得票数 1
回答已采纳
1回答
在我声明为ng-content的组件中有一个组件，因此我希望向这些组件中添加样式，这些样式将位于ng-content示例中
父组件
<ng-content></ng-content>
现在，我使用父组件并将一些内容提供给选择器。
<app-parent-component>
<div class="block"></div>
</app-parent-component>
所以在DOM中我得到了这个结果
<app-parent-component>
<div class="bl
浏览 6提问于2022-11-25得票数 1
回答已采纳
3回答
我已经创建了一个模式组件，项目3个部分:页眉，正文和页脚。
modal.component.html
<div>
<ng-content select="section[modal-header]"></ng-content>
<ng-content select="section[modal-body]"></ng-content>
<ng-content select="section[modal-footer]"></ng-content&
浏览 10提问于2017-08-09得票数 6
回答已采纳
我正在angular2中制作一个侧边栏。
代码：
侧栏(子)组件的模板：
<div class="sidebar">
<ng-content></ng-content>
</div>
父组件的模板：
<app-sidebar>
<li>
<a data-toggle="collapsible-1">Menu-item</a>
<ul id="collapsible-1">
<li>Sub-it
浏览 3提问于2017-02-26得票数 1
回答已采纳
1回答
我有以下情况：
page.component.html
<app-component-w-directive>
<child-component></child-component>
</app-component-w-directive>
component-w-directive.component.html
<ng-template
myCustomDirective
[someInputs]="someValues"
[someInputs]="someValues"
[someI
浏览 19提问于2022-11-30得票数 0
这样的事有可能吗？
我想从cjc通过ng-content属性向cjc-输入组件传递一个"hasfocus“变量。
app.component.html
<div cjc-box><div cjc-input></div></div>
cic-box.component.html
<div class="cjc-box">
<div><ng-content hasfocus="focus"></ng-content></div>
</div
浏览 2提问于2016-04-17得票数 10
回答已采纳
1回答
我正在使用内容投影将按钮放入组件中。
<hello name="{{ name }}">
<button #btn>Click Me</button>
</hello>
和组件：
@Component({
selector: 'hello',
template: `
<h3>Hello {{name}}!</h3>
<ng-content></ng-content>
`
})
到目前为止一切顺利..。但是现在我想向该按钮添加一个(单击)事件侦听
浏览 3提问于2018-08-29得票数 3
回答已采纳
3回答
我试图嵌套两个组件，方法是将它们的元素选择器写入另一个组件的HTML中，比如这个<outerElementSelector><innerElementSelector></innerElementSelector></outerElementSelector>。我发现我的<innerElementSelector>没有呈现在页面上。
注意:上面提到的选择器名称是虚构的，不是代码的一部分，我只是用它们来解释我的问题。此外，浏览器的控制台上没有错误。是的，我已经在app.module.ts中的组件中提到过，为了了解我们的组件
我有三个组件
浏览 14提问于2022-11-07得票数 2
回答已采纳
是否有方法将容器或包装器标记作为投影内容传递到组件中？
以下是一些代码：
，这就是我想使用它的方式，
<my-component>
<div class="wrapper">
<ng-content></ng-content>
</div>
</my-component>
组件
@Component({
selector: 'my-component',
template: `
<ng-content select=
浏览 3提问于2017-12-26得票数 1
回答已采纳
// component parent - template
<div class="parent">
<ng-content></ng-content>
</div>
// somewhere in the code
<parent>
<label>Some Text</label>
</parent>
如在父组件的样式中设置标签的颜色？
.parent label
color: red
浏览 2提问于2017-06-09得票数 0
1回答
我正在尝试创建一个具有自己的ng内容的自定义primeNG按钮。其目标是，如果给出了内容，则应该使用它来代替标准的pButton标签绑定。
这是我为这个组件提出的基本代码：
<button pButton [label]="label">
<ng-content></ng-content>
</button>
当然，这将始终同时显示标签和在按钮中提供的ng内容。只有在不提供内容的情况下，我才希望看到标签。
我在这个问题上做了几个兔子洞，包括尝试集成ngIf、使用ViewChild检查ng内容是否存在等等。如果有任何帮助，我们将
浏览 1提问于2019-06-19得票数 1
回答已采纳
让我们假设我有一个组件，需要包装不同的内容集：
<div class="box-box"> ... content ... </div>
与其将组件放在模板上并将输入传递给子组件，不如执行以下操作：
<my-big-box> ... content ... </my-big-box>或<div myBigBox> ... content ... </div>
前者是首选。我看到类似于角组件，如ng-content或material组件所做的事情。不确定这是如何实现的，或者用什么“术语”来获得更好的理解。
任
浏览 1提问于2022-11-23得票数 1
回答已采纳
6回答
多ng含量
、、、
我正在尝试使用角度6中的多个ng-content构建一个自定义组件，但这不起作用，我也不知道为什么。
这是我的组件代码：
<div class="header-css-class">
<ng-content select="#header"></ng-content>
</div>
<div class="body-css-class">
<ng-content select="#body"></ng-content>
</d
浏览 1提问于2018-10-04得票数 182
回答已采纳
2回答
我有一个带有这样一个模板的下拉列表：
<div class="dropdown-trigger" (click)="contentToggle()">
<ng-content select="dropdown-trigger"></ng-content>
</div>
<div class="dropdown-content" *ngIf="showContent">
<ng-content select="dropdow
浏览 2提问于2017-04-05得票数 3
回答已采纳
我正在用登录和注册页面制作一个应用程序。它们有很多共同之处，我想把它们放在一个叫做auth组件的组件中。
组件层次结构是：
app-component
auth-component
login-component
signup-component
other-component
但是，由于仅使用mypage.com/auth并不能用于任何事情，所以我宁愿把这个部分去掉，使用URL:s mypage.com/login和mypage.com/signup，而不是中间的'auth‘。
目前，我能想出的方法是：
将'auth‘硬编码到登
浏览 6提问于2022-10-18得票数 0
回答已采纳
1回答
我试图用我自己的组件包装一些第三方组件(它们都是角5组件)。
当使用第三方组件(不包装它们)时，我有以下代码：
<div>
<xyz-menubar>
<a xyzMenubarItem></a>
<a xyzMenubarItem></a>
</xyz-menubar>
</div>
我的目标是包装这些组件，使其具有以下代码：
<div>
<app-menu>
<app-menu-item></app-menu-item
浏览 2提问于2017-11-29得票数 4
回答已采纳
1回答
是否可以像这样定义模板html：
<ipe-container>
<ipe-artboard></ipe-artboard>
</ipe-container>
在某种程度上？
这两个组件都是已知的，并在发生这种情况的模块中声明。我现在看到的是，只有ipe容器被实例化(在DOM中可用)，但是ipe-艺术板却无处可见。当将这个ip图板组件不嵌套时，它会在浏览器(DOM)中呈现。
浏览 0提问于2018-02-09得票数 1
回答已采纳
我正在创建一个使用角度2的3d“卡片翻转”。一个父的‘卡片翻转’组件包含一个嵌套的‘卡片翻转-前面’和‘卡-翻转’组件。
<card-flip card-flip-id="demo-1" class="grid_col-6">
<card-flip-front class="card">
<div class="card__inner">
Card Front
</div>
</card-flip-front>
<card-f
浏览 2提问于2017-04-11得票数 3
在一个组件中，我有以下内容：
<sidemenu #side>
<h1>{{item}}</h1>
</sidemenu>
在sidemenu组件中：
aNames=["pedro","juan"]
.
.
.
<div *ngFor="let item of aNames">
<ng-content [name]="item"></ng-content>
浏览 0提问于2020-03-17得票数 0
1回答
角5中的兄弟姐妹部分
、、、
我试图让一个兄弟组件上的单击事件被另一个兄弟组件“听到”。
我是否应该将事件沿链传递给父级，检测更改，然后以某种方式将其传递给兄弟姐妹(另一个孩子给父母)？
页面模板中的组件：
<wrap>
<toggler>Toggle the Box</toggler>
<box>Box Content ...</box>
</wrap>
切换组件：
@Component({
selector: 'toggler',
template: `<div (click)="toggleBox()
浏览 1提问于2018-05-22得票数 0
回答已采纳
我希望访问和操作一个自定义html元素，该元素在我的项目的另一个.ts文件中从组件中声明。
/src/app/@theme/layouts/one-column/one-column-layout.ts --这是使用自定义html元素的文件。
/src/app/pages/dashboard/dashboard.component.ts --这是我想要访问自定义元素的地方，并在其中附加一些innerHTML。
我几乎检查了所有的东西，但没有得到满意的答案；我已经查过的是：
在one-column-layout.ts中，我想在<ng-content&g
浏览 0提问于2019-08-25得票数 0
回答已采纳
1回答
假设我有这样的模态模板：
<div class="modal-header">
<h3 [innerHtml]="header"></h3>
</div>
<div class="modal-body">
<ng-content></ng-content>
</div>
<div class="modal-footer">
</div>
我从另一个组件中调用这个模式，所以：
const mo
浏览 6提问于2017-06-04得票数 9
在我看来，带有组件选择器的ng-content标签与编写组件标签本身是一样的。例如，我正在为一个项目执行一些任务，它使用以下内容：
<div class="sidebar-style"
[ngClass]="{
'sidebar-hidden': !showSidebar
}">
<ng-content select="car-sidebar"></
浏览 0提问于2018-12-12得票数 1
3回答
如果div.parent从下面的代码中为空，我想隐藏删除ng-content
<div class="parent">
<ng-content></ng-content>
</div>
我试过像下面这样使用引用，但似乎不起作用。
<div class="parent" *ngIf="!child.children.length">
<div class="child">
<ng-content></ng-content>
浏览 16提问于2022-02-01得票数 0
我有一个my-alert-component，它看起来像这样：
import { Component, OnInit,Input } from '@angular/core';
@Component({
selector: 'app-my-alert',
template: `
<h1 (click)="alert()">{{type}}</h1>
<ng-content></ng-content>
`
})
export class MyAlertComponen
浏览 5提问于2017-11-22得票数 1
当使用<ng-content></ng-content>进行内容投影时，通常可以通过依赖注入访问父组件： @Component({
selector: 'app-parent',
template: 'Parent / <ng-content></ng-content>'
})
export class ParentComponent {}
@Component({
selector: 'app-child',
template: 'Child / Has parent:
浏览 8提问于2021-07-19得票数 0
回答已采纳
我在html端有一个嵌套组件，如下所示：
<main>
<ng-content *ngFor="let item in data">
<car *ngIf="item.type=='car'"></car>
<plane *ngIf="item.type=='car'"></plane>
</ng-content>
</main>
我的car和plane组件是一个基本的cehicle类。
浏览 3提问于2019-09-22得票数 1
回答已采纳
2回答
我有以下Tab组件：
@Component({
selector: 'tab',
templateUrl: './tab.component.html',
styleUrls: ['./tab.component.css'],
providers: [TabService]
})
export class TabComponent implements OnInit {
@Input() active: boolean;
@Input() title: string;
public value: string =
浏览 5提问于2019-11-22得票数 1
回答已采纳
如果我有一个组件BaseComponent，它看起来像 <ng-container *ngTemplateOutlet="tpl"></ng-container> 和另一个组件OtherComponent，它将模板传递给它 <base-component [tpl]="tpl">Some content for ng-content</base-component>
<ng-template #tpl>
<ng-content></ng-content>
<!-
浏览 11提问于2019-01-24得票数 0
1回答
我面临一个两难的设计模式，为我的应用程序。
我目前有一个标题组件，它在大于992px和更小的分辨率上完全不同。在我的组件中，我有两个不同的<section>标记，我根据分辨率显示/隐藏它们(使用媒体查询)。现在的问题是，如果我使用内容投影<ng-content>，就不能同时在两个(<section>)标记中添加相同的子组件。因此，我必须使用带有"select“参数的<ng-content>。但是，在这种情况下，我必须将每个子组件包含两次(每个ng-内容在我的标题中各包含一个)。
更别提注入的一些子组件在分辨率大于992px和小于992px
浏览 1提问于2017-05-10得票数 0
回答已采纳
我在angular2和typescript.The类的名称中出错了，AccordionGroup类的名称应该以后缀Component.Its结尾，但是它显示了错误，我已经在angular2中实现了手风琴，typescript.Here是我的code.Please，帮助我提前感谢。
import {Component, Input, OnDestroy} from '@angular/core';
@Component({
selector: 'accordion',
template:'<ng-content>
浏览 0提问于2016-06-29得票数 5
回答已采纳
我读到这还不受支持，但我想知道是否有人想出了一个解决这个问题的办法。
我目前拥有的是一个具有此模板的父组件：
<dxi-item location='after' class="osii-item-content">
<span><ng-content select="[osii-page-button]"></ng-content></span>
</dxi-item>
它创建了以下内容：
<dxi-item location='after'
浏览 3提问于2018-10-02得票数 6
我在安格鲁尔有两个案子。首先，我有一个槽ng-content，但它可以是空的。第二，这个插槽可能是空的，如果是，我需要隐藏父块。
我正在尝试编写ng-if，但这不起作用
<div class="content-block" *ng-If="ng-content">
<ng-content></ng-content>
</div>
我怎么能做到这一点？
<r-checkbox>Content <a href=''>link</a></r-check
浏览 8提问于2020-08-01得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
