如何将子元素附加到Angular 7中的div
在Angular 7中，可以通过使用Angular的模板语法和指令来将子元素附加到div元素中。以下是具体步骤：
- 在组件的HTML模板文件中找到对应的div元素，例如：
<div id="parentDiv">
<!-- 子元素将被附加到这里 -->
</div>- 使用Angular的内置指令
ng-container，它允许我们在不引入多余HTML元素的情况下操作DOM结构。将ng-container指令添加到div元素中，并使用ngTemplateOutlet指令引用一个模板变量，例如：
<div id="parentDiv">
<ng-container *ngTemplateOutlet="childTemplate"></ng-container>
</div>- 在组件的ts文件中，定义一个模板变量来引用子元素的模板，例如：
@Component({
selector: 'app-parent-component',
template: `
<div id="parentDiv">
<ng-container *ngTemplateOutlet="childTemplate"></ng-container>
</div>
`
})
export class ParentComponent {
@ViewChild('childTemplate', {static: true}) childTemplate: TemplateRef<any>;
}- 在组件的HTML模板文件中，创建一个ng-template标签，并为其添加一个模板变量，例如：
<ng-template #childTemplate>
<!-- 子元素的内容 -->
<p>这是子元素的内容</p>
</ng-template>现在，子元素已成功附加到父div元素中。你可以在ng-template标签中添加任意HTML内容来定义子元素的结构。这种方法适用于Angular 7及以上版本，并且不依赖于特定的云计算平台或品牌商。
请注意，以上提到的Angular相关概念、指令和方法都是官方文档提供的，详细文档可以参考Angular官方网站：https://angular.io/
相关·内容
您好，我正在尝试将一个类动态添加到视图上更新的元素中。<div ng-app> <ul> done: false text: 'build an awesome
浏览 0提问于2018-07-03得票数 2
我的模板使用两个自定义指令 <div my-child-directive> </div>父指令使用name=foo将类添加到输入元素的父元素中。父元素由子
浏览 0提问于2015-01-20得票数 1
回答已采纳
我试图在容器中选择包含特定文本的容器，然后相应地隐藏它们。这会导致我的容器部分脱落。-- Wanting to select here --> word <div> <!-- currently selecti
浏览 3提问于2015-08-12得票数 2
回答已采纳
2回答
这个应该console.log控制器的'first‘指令，为什么没有发生呢？我几乎可以肯定，这可能会工作得很好。“‘second”指令从attrs获取具有“third”的模板并追加它。DOCTYPE html> <script data-require="angular.js@1.4.3" data-semver="1.4.3" src="https://code.angularjs.
浏览 0提问于2015-08-28得票数 0
我正在创建一个回退图像指令，如下所示的 return {typeahead.js插件()添加到DOM的元素。<div class='tt-suggestion'>
<div><span class="my-directive&
浏览 3提问于2014-03-12得票数 0
我尝试将一个子元素附加到在Angular 7中的html中定义的div中，但仍然抛出以下错误： Cannot read property 'appendChild' of null 这是导致问题的代码ProductComponent{this.initinit(){
//private container : any = document.createElement
浏览 15提问于2019-02-20得票数 0
3回答
如何将CSS添加到子元素的子元素中，我尝试了以下代码 background-color: #e85050;}<div class="inactive-property">
浏览 5提问于2016-07-18得票数 0
回答已采纳
4回答
D3将多个子项添加到同一父项
、、、、
如何将多个子元素添加到父元素中？这就是我想要实现的： <div id = "child1"></div></div>
然而，这将使c
浏览 1提问于2013-06-06得票数 1
1回答
与jquery相比，我发现在angular中制作动画非常困难。有这么多版本的angular动画fadein和fadeout，我在博客/教程/等等中找到了它们，其中一些是在旧版本的angular上。当新的版本取代旧的版本时，Angular的版本似乎非常不一致。我看不到任何标准的方法。因此，我不知道从哪里开始。<button ng-c
浏览 0提问于2014-12-13得票数 5
回答已采纳
我有一段代码，我试图将一个按钮附加到页面上的每个输入元素-如果我检查dom，按钮就在那里，但它永远不会被呈现。<html> <label for="input1">input1</label>
<input<label for="input2">input2</la
浏览 0提问于2018-02-09得票数 0
我正在使用Angular 6开发一个文档编辑器应用程序。它有一个纸张元素，看起来像固定大小的纸张。 用户可以将多个子元素(角度组件)添加到此纸张元素。当用户添加子分区时，如果子分区占用的空间超过父分区的容量，则需要将div自动添加到下一个分区，如果删除了任何子分区，则需要将溢出的分区重新添加到第一张纸中。 有没有办法做到这一点？我做了一个简化<e
浏览 16提问于2019-03-13得票数 0
如果散列等于#area和id="Hafr“，如何将类切换到特定的html元素class="opened"<div id="hafr"></div>
如果来自url的散列=中查找我的子菜单
浏览 1提问于2014-06-17得票数 1
我有两个div源(包含拖放元素)和目标(用于删除拖动内容的空间)。我已经将带有四列的行设置并附加到目标div中，以使其可下垂。您可以在中找到一个示例代码。所有人都是在拖放的情况下工作。但是我的问题是“当我将一个内容拖到目标div的子目录中时，所拖动的内容就会附加到从父级到选定子目标的整个树中”，所以请帮助我。1)如何将内容放置到选定的子<
浏览 2提问于2015-12-22得票数 0
回答已采纳
Angular 2/4/5/6:我有一个div：<P> This is a examplenote </P>在Angular的typescript文件中单击或高亮显示时，如何在innerHtml中获得这些子html元素的引用？这样做的</
浏览 8提问于2018-08-12得票数 0
我正在使用GWT/GAE构建一个web应用程序，我想显示一个允许用户上传图像的弹出窗口。PS:我使用的不是UIBinder，而是纯Java代码
浏览 0提问于2012-03-07得票数 0
回答已采纳
我对方向有点困惑，我想做一个组合框，它由多个元素组成。有角的人说，不要在控制器中做任何操作，所以他们指向链接函数。当我试图将事件附加到子元素时，从父元素中删除它们并将它们附加到主体中，如果没有jquery.maybe，真的很难执行这些操作，有更好的方法吗？以下是代码： <div id="combo-wrapper-{{id}}" class="combo-wrapper&quo
浏览 3提问于2014-07-31得票数 0
回答已采纳
1回答
Scrollbar看不到div的高度，因为scrollbar更新在子元素呈现之前应用。我怎样才能看到什么元素被编译了？$scope.$watch('comments', function(){
angular.element('#comment
浏览 1提问于2013-03-09得票数 0
2回答
我正在尝试将一个元素附加到指令元素的子元素中。该函数具有传递给它的范围和元素。我以为'el‘会是独一无二的，就像在做jQuery addRule($this)一样。但情况似乎并非如此，因为如果页面上有几个<group> div，那么$(el).find('.getGroups').append(rule)代码将追加到页面上该元素的<
浏览 2提问于2014-04-02得票数 0
回答已采纳
1回答
我有一个非常简单的ngFor <div *ngFor="let service of loadedServices; let i = index;"> </div>
</div> 根据服务的不同，我必须加载不同的组件。我已经看到，使用ComponentFactoryResolver (https://angular.io&
浏览 5提问于2019-09-20得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
腾讯会议
云直播
对象存储活动推荐
腾讯云开发者
