blocks|key|400369|text|你不能引用那样的类。我认为您希望引用一个元素，因为您将在元素上使用#。但这也帮不了你。父级在子级之前呈现，如果由于子更改而从DOM中移除父级，则会遇到错误Expression+Changed+After+It+Has+Been+Checked。为此，我已经在循环中实现了viewChild+of+parentRef，并由此计算子容器是否有子元素(如果ng容器有任何元素)。如果它有孩子，我们就把它的父母移走。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|400370|如果出于某种原因，以后要删除父级，则可以调用removeParent()。|400371|编辑children+=+[1,2,3]，观察生孩子和不生孩子的效果。|400372|<p>Remove+parent+if+child+is+empty+(look+console)</p>
<br>
<div+class="parent"+*ngIf="!hideParent">
++I+am+parent
++<div+class="child"+#childRef>+
++++<ng-container+*ngFor="let+child+of+children">
++++++<div>I+am+child+nr:+#+{{child}}<br></div>
++++</ng-container>
++</div>
</div>|code-block|syntax|javascript|400373|@Component({
++selector:+'my-app',
++templateUrl:+'./app.component.html',
++styleUrls:+['./app.component.css']
})
export+class+AppComponent+implements+AfterContentChecked+{
++name+=+'Angular';
++@ViewChild('childRef')+child:+ElementRef;
++hideParent:+boolean+=+false;
++children+=+[1,+2,+3];
++parentElem:+any;

++ngAfterContentChecked()+{
++++this.removeParent();
++}

++removeParent()+{
++++if+(this.child)+{
++++++let+childrenCount+=+this.child.nativeElement.childElementCount;
++++++console.log('child:+',+this.child);
++++++console.log('child+elements+in+child:+',+childrenCount);
++++++if+(childrenCount+==+0)+{
++++++++console.log('hiding');
++++++++this.hideParent+=+true;
++++++}
++++}
++}
}|400374|下面是一个有用的示例：https://stackblitz.com/edit/angular-4krctv?file=src%252Fapp%252Fapp.component.html|400375|entityMap|0|LINK|mutability|MUTABLE|url|https://stackblitz.com/edit/angular-4krctv?file=src%252Fapp%252Fapp.component.html^0|X|1|25|18|3R|9|44|9|0|M|E|0|2|I|0|0|0|B|26|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]|$9|13|A|14|B|C]|$9|15|A|16|B|C]|$9|17|A|18|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|19|8|@$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1C|8|@$9|1D|A|1E|B|C]]|D|@]|E|$]]|$1|J|3|K|5|L|7|1F|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|L|7|1G|8|@]|D|@]|E|$M|N]]|$1|Q|3|R|5|6|7|1H|8|@]|D|@$9|1I|A|1J|1|1K]]|E|$]]|$1|S|3|-4|5|6|7|1L|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z]]]]

<p>You can not reference a class like that. I think you want to reference an element, for that you would use <code>#</code> on the element. But that won't help you either. Parent is rendered before child is and if parent is removed from DOM because of child changes you would stumble on an error <code>Expression Changed After It Has Been Checked</code>. For that I have implemented to <code>viewChild</code> of <code>parentRef</code> in cycle <code>ngAfterContentChecked</code> and from that we count if child has any children (if ng-container has any elements). If it does have children we remove parent.</p>
<p>If for some reason you want to remove parent a later time you can call <code>removeParent()</code> to do so.</p>
<p>Edit <code>children = [1,2,3]</code> to observe effects of having children and not having them.</p>
<pre class="lang-html prettyprint-override"><code>&lt;p&gt;Remove parent if child is empty (look console)&lt;/p&gt;
&lt;br&gt;
&lt;div class=&quot;parent&quot; *ngIf=&quot;!hideParent&quot;&gt;
  I am parent
  &lt;div class=&quot;child&quot; #childRef&gt; 
    &lt;ng-container *ngFor=&quot;let child of children&quot;&gt;
      &lt;div&gt;I am child nr: # {{child}}&lt;br&gt;&lt;/div&gt;
    &lt;/ng-container&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>
<pre class="lang-js prettyprint-override"><code>@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterContentChecked {
  name = 'Angular';
  @ViewChild('childRef') child: ElementRef;
  hideParent: boolean = false;
  children = [1, 2, 3];
  parentElem: any;

  ngAfterContentChecked() {
    this.removeParent();
  }

  removeParent() {
    if (this.child) {
      let childrenCount = this.child.nativeElement.childElementCount;
      console.log('child: ', this.child);
      console.log('child elements in child: ', childrenCount);
      if (childrenCount == 0) {
        console.log('hiding');
        this.hideParent = true;
      }
    }
  }
}
</code></pre>
<p>Here is a working example: <a href="https://stackblitz.com/edit/angular-4krctv?file=src%2Fapp%2Fapp.component.html" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-4krctv?file=src%2Fapp%2Fapp.component.html</a></p>


blocks|key|818822|text|考虑到ng内容持有者通常是调用它的另一个组件的子组件，您的父级名称令人困惑。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|818823|<div+class="parent">
+<ng-content></ng-content>
</div>|code-block|syntax|javascript|818824|调用的HTML应该如下所示：(其中ng-内容在app-脚注中)|818825|<app-footer>
+++<p>MY+CONTENT+TO+THE+ng-content+THINGY</p>
</app-footer>|818826|您将希望升级应用程序页脚(ng-content组件)，使其具有一个输入字段。|818827|import+{+Component,+Input+}+from+'@angular/core';+

//.......
export+class+FooterComponent+{
++@Input()+displayParentDiv+=+true;+|818828|在你的模板里|818829|<div+class="parent"+*ngIf="displayParentDiv">
+<ng-content></ng-content>
</div>|818830|然后在您的页脚(ng-内容持有者)文件中：|818831|<p>Pass+the+input+false+if+you+don't+want+it+displayed:</p>
<app-footer+[displayParentDiv]="false">
+++<p>MY+CONTENT+TO+THE+ng-content+THINGY</p>
</app-footer>

<p>+To+display+it,+don't+give+it+any+value+considering+default+is+true</p>
<app-footer>
+++<p>MY+CONTENT+TO+THE+ng-content+THINGY</p>
</app-footer>|818832|我在许多项目中重用的对象的示例代码是使用工具栏的材料图标导航项，下面是代码。请注意，我默认了所有的值，使它们不是有义务的字段，例如，我只能传递一个物质图标引用，而没有提示或路由链接。|818833|import+{+Component,+Input,+Output,+EventEmitter+}+from+'@angular/core';

@Component({
++selector:+'ps-nav-item',
++template:+`
++++<a+mat-list-item+[routerLink]="routerLink"+(click)="navigate.emit()">
++++++<mat-icon+mat-list-icon>{{+icon+}}</mat-icon>
++++++<span+mat-line><ng-content></ng-content></span>
++++++<span+mat-line+class="secondary">{{+hint+}}</span>
++++</a>
++`,
++styles:+[
++++`
++++++.secondary+{
++++++++color:+rgba(0,+0,+0,+0.54);
++++++}
++++`,
++],
})
export+class+NavItemComponent+{
++@Input()+icon+=+'';
++@Input()+hint+=+'';
++@Input()+routerLink:+string+%7C+any[]+=+'/';
++@Output()+navigate+=+new+EventEmitter();
}|818834|然后，父母HTML多次调用这一点：|818835|++++++++<ps-nav-item+(navigate)="closeSidenav()"+*ngIf="loggedIn$+%7C+async"+routerLink="/"+icon="book"+hint="View+your+report+collection">
++++++++++My+Collection
++++++++</ps-nav-item>
++++++++<ps-nav-item+(navigate)="closeSidenav()"+*ngIf="loggedIn$+%7C+async"+routerLink="/reports/find"+icon="search"+hint="Search+for+a+report!">
++++++++++Browse+Reports
++++++++</ps-nav-item>
++++++++<ps-nav-item+(navigate)="closeSidenav()"+*ngIf="!(loggedIn$+%7C+async)">
++++++++++Sign+In
++++++++</ps-nav-item>
++++++++<ps-nav-item+(navigate)="logout()"+*ngIf="loggedIn$+%7C+async">
++++++++++Sign+Out
++++++++</ps-nav-item>|818836|参考文献角文档|offset|length|818837|entityMap|0|LINK|mutability|MUTABLE|url|https://angular.io/guide/inputs-outputs#configuring-the-child-component^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|4|3|0|0^^$0|@$1|2|3|4|5|6|7|1G|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1H|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|1I|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|1J|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|1K|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|1L|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|1M|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|1N|8|@]|9|@]|A|$E|F]]|$1|S|3|T|5|6|7|1O|8|@]|9|@]|A|$]]|$1|U|3|V|5|D|7|1P|8|@]|9|@]|A|$E|F]]|$1|W|3|X|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|D|7|1R|8|@]|9|@]|A|$E|F]]|$1|10|3|11|5|6|7|1S|8|@]|9|@]|A|$]]|$1|12|3|13|5|D|7|1T|8|@]|9|@]|A|$E|F]]|$1|14|3|15|5|6|7|1U|8|@]|9|@$16|1V|17|1W|1|1X]]|A|$]]|$1|18|3|-4|5|6|7|1Y|8|@]|9|@]|A|$]]]|19|$1A|$5|1B|1C|1D|A|$1E|1F]]]]

<p>Your name for parent is confusing considering the ng-content holder is normally the child of another component which calls it.</p>
<pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;parent&quot;&gt;
 &lt;ng-content&gt;&lt;/ng-content&gt;
&lt;/div&gt;
</code></pre>
<p>The calling HTML would look something like this:
(where your ng-content is in app-footer)</p>
<pre class="lang-html prettyprint-override"><code>&lt;app-footer&gt;
   &lt;p&gt;MY CONTENT TO THE ng-content THINGY&lt;/p&gt;
&lt;/app-footer&gt;
</code></pre>
<p>You'll want to upgrade your app-footer (ng-content component) to have an input field</p>
<pre class="lang-js prettyprint-override"><code>import { Component, Input } from '@angular/core'; 

//.......
export class FooterComponent {
  @Input() displayParentDiv = true; 
</code></pre>
<p>And in you template</p>
<pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;parent&quot; *ngIf=&quot;displayParentDiv&quot;&gt;
 &lt;ng-content&gt;&lt;/ng-content&gt;
&lt;/div&gt;
</code></pre>
<p>And then in your footer (ng-content holder) file:</p>
<pre class="lang-html prettyprint-override"><code>&lt;p&gt;Pass the input false if you don't want it displayed:&lt;/p&gt;
&lt;app-footer [displayParentDiv]=&quot;false&quot;&gt;
   &lt;p&gt;MY CONTENT TO THE ng-content THINGY&lt;/p&gt;
&lt;/app-footer&gt;

&lt;p&gt; To display it, don't give it any value considering default is true&lt;/p&gt;
&lt;app-footer&gt;
   &lt;p&gt;MY CONTENT TO THE ng-content THINGY&lt;/p&gt;
&lt;/app-footer&gt;
</code></pre>
<p>Example code of a  object which I reuse in many of my projects is the use of a material icon navigation item for a toolbar is the code below. Notice that I defaulted all the values, making them not obligated fields, I could for instance only pass an material icon reference and no hint or routerlink</p>
<pre class="lang-js prettyprint-override"><code>import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'ps-nav-item',
  template: `
    &lt;a mat-list-item [routerLink]=&quot;routerLink&quot; (click)=&quot;navigate.emit()&quot;&gt;
      &lt;mat-icon mat-list-icon&gt;{{ icon }}&lt;/mat-icon&gt;
      &lt;span mat-line&gt;&lt;ng-content&gt;&lt;/ng-content&gt;&lt;/span&gt;
      &lt;span mat-line class=&quot;secondary&quot;&gt;{{ hint }}&lt;/span&gt;
    &lt;/a&gt;
  `,
  styles: [
    `
      .secondary {
        color: rgba(0, 0, 0, 0.54);
      }
    `,
  ],
})
export class NavItemComponent {
  @Input() icon = '';
  @Input() hint = '';
  @Input() routerLink: string | any[] = '/';
  @Output() navigate = new EventEmitter();
}
</code></pre>
<p>The parents HTML then calls this multiple times:</p>
<pre class="lang-html prettyprint-override"><code>        &lt;ps-nav-item (navigate)=&quot;closeSidenav()&quot; *ngIf=&quot;loggedIn$ | async&quot; routerLink=&quot;/&quot; icon=&quot;book&quot; hint=&quot;View your report collection&quot;&gt;
          My Collection
        &lt;/ps-nav-item&gt;
        &lt;ps-nav-item (navigate)=&quot;closeSidenav()&quot; *ngIf=&quot;loggedIn$ | async&quot; routerLink=&quot;/reports/find&quot; icon=&quot;search&quot; hint=&quot;Search for a report!&quot;&gt;
          Browse Reports
        &lt;/ps-nav-item&gt;
        &lt;ps-nav-item (navigate)=&quot;closeSidenav()&quot; *ngIf=&quot;!(loggedIn$ | async)&quot;&gt;
          Sign In
        &lt;/ps-nav-item&gt;
        &lt;ps-nav-item (navigate)=&quot;logout()&quot; *ngIf=&quot;loggedIn$ | async&quot;&gt;
          Sign Out
        &lt;/ps-nav-item&gt;
</code></pre>
<p>ref <a href="https://angular.io/guide/inputs-outputs#configuring-the-child-component" rel="nofollow noreferrer">angular docs</a></p>


blocks|key|400404|text|如果您无法访问ng内容，也无法从使用您的组件的人员那里获得可能的输入，则必须使用javascript或CSS验证它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|400405|CSS方法：|offset|length|style|BOLD|400406|.displayNoneWhenEmpty:empty{
++display:none;
}|code-block|syntax|javascript|400407|<div+class="displayNoneWhenEmpty">Not+Empty</div>

<div+class="displayNoneWhenEmpty"></div>|400408|参考文献|400409|Javascript方法：|400410|向父div添加一个id和一个布尔检查：|400411|<div+class="parent"+id="parentDivId"+*ngIf="hideParent">
+<ng-content></ng-content>
</div>|400412|然后在组件中添加一个布尔变量，在构造函数中设置该变量。|400413|hideParent:+boolean+=+false;
constructor(){
++++hideParent+=+document.getElementById("parentDivId")?.childElementCount+>+0;
}|400414|entityMap|0|LINK|mutability|MUTABLE|url|https://www.semicolonworld.com/question/16996/hide-parent-div-when-no-child-div-inside^0|0|0|6|0|0|0|0|4|0|0|0|D|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|19|8|@$D|1A|E|1B|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|1C|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|J|7|1D|8|@]|9|@]|A|$K|L]]|$1|O|3|P|5|6|7|1E|8|@]|9|@$D|1F|E|1G|1|1H]]|A|$]]|$1|Q|3|R|5|6|7|1I|8|@$D|1J|E|1K|F|G]]|9|@]|A|$]]|$1|S|3|T|5|6|7|1L|8|@]|9|@]|A|$]]|$1|U|3|V|5|J|7|1M|8|@]|9|@]|A|$K|L]]|$1|W|3|X|5|6|7|1N|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|J|7|1O|8|@]|9|@]|A|$K|L]]|$1|10|3|-4|5|6|7|1P|8|@]|9|@]|A|$]]]|11|$12|$5|13|14|15|A|$16|17]]]]

<p>If you have no access to the ng-content nor to the possible input from the people using your components, then you have to validate it with javascript or CSS</p>
<p><strong>CSS method:</strong></p>
<pre class="lang-css prettyprint-override"><code>.displayNoneWhenEmpty:empty{
  display:none;
}
</code></pre>
<pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;displayNoneWhenEmpty&quot;&gt;Not Empty&lt;/div&gt;

&lt;div class=&quot;displayNoneWhenEmpty&quot;&gt;&lt;/div&gt;
</code></pre>
<p><a href="https://www.semicolonworld.com/question/16996/hide-parent-div-when-no-child-div-inside" rel="nofollow noreferrer">reference</a></p>
<p><strong>Javascript method:</strong></p>
<p>Add an id to the parent div and a boolean check:</p>
<pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;parent&quot; id=&quot;parentDivId&quot; *ngIf=&quot;hideParent&quot;&gt;
 &lt;ng-content&gt;&lt;/ng-content&gt;
&lt;/div&gt;
</code></pre>
<p>Then in your component add a boolean variable, which you set in the constructor</p>
<pre class="lang-js prettyprint-override"><code>hideParent: boolean = false;
constructor(){
    hideParent = document.getElementById(&quot;parentDivId&quot;)?.childElementCount &gt; 0;
}
</code></pre>


<p>I want to hide remove <code>div.parent</code> if <code>ng-content</code> is empty from bellow code</p>
<pre><code>&lt;div class=&quot;parent&quot;&gt;
 &lt;ng-content&gt;&lt;/ng-content&gt;
&lt;/div&gt;
</code></pre>
<p>I tried using reference like bellow, but seems to be not working</p>
<pre><code>&lt;div class=&quot;parent&quot; *ngIf=&quot;!child.children.length&quot;&gt;
  &lt;div class=&quot;child&quot;&gt; 
    &lt;ng-content&gt;&lt;/ng-content&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>Is there a better approach to remove parent element if <code>ng-content</code> is empty?</p>


How to remove parent element if ng-content is empty

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

如果div.parent从下面的代码中为空，我想隐藏删除ng-content<div class="parent"> <ng-content></ng-content></div>我试过像下面这样使用引用，但似乎不起作用。<div class="parent" *ngIf="!child.children.length...

问如果ng-内容为空，如何删除父元素
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如果ng-内容为空，如何删除父元素EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如果ng-内容为空，如何删除父元素
EN