0

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>
  </div>
</div>

ng-content如果为空，是否有更好的方法来删除父元素？

4

3 回答 3

0

考虑到 ng-content 持有者通常是另一个调用它的组件的子组件，您的 parent 名称令人困惑。

<div class="parent">
 <ng-content></ng-content>
</div>

调用 HTML 看起来像这样：（您的 ng-content 位于 app-footer 中）

<app-footer>
   <p>MY CONTENT TO THE ng-content THINGY</p>
</app-footer>

您需要升级您的应用页脚（ng-content 组件）以具有输入字段

import { Component, Input } from '@angular/core'; 

//.......
export class FooterComponent {
  @Input() displayParentDiv = true;

在你的模板中

<div class="parent" *ngIf="displayParentDiv">
 <ng-content></ng-content>
</div>

然后在您的页脚（ng-content holder）文件中：

<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>

我在许多项目中重用的对象的示例代码是工具栏的材质图标导航项的使用是下面的代码。请注意，我默认了所有值，使它们不是必填字段，例如，我只能传递材料图标引用而没有提示或路由器链接

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 | any[] = '/';
  @Output() navigate = new EventEmitter();
}

父母 HTML 然后多次调用它：

        <ps-nav-item (navigate)="closeSidenav()" *ngIf="loggedIn$ | async" routerLink="/" icon="book" hint="View your report collection">
          My Collection
        </ps-nav-item>
        <ps-nav-item (navigate)="closeSidenav()" *ngIf="loggedIn$ | async" routerLink="/reports/find" icon="search" hint="Search for a report!">
          Browse Reports
        </ps-nav-item>
        <ps-nav-item (navigate)="closeSidenav()" *ngIf="!(loggedIn$ | async)">
          Sign In
        </ps-nav-item>
        <ps-nav-item (navigate)="logout()" *ngIf="loggedIn$ | async">
          Sign Out
        </ps-nav-item>

参考角度文档

于 2022-02-01T13:56:14.403 回答
0

你不能引用这样的类。我想你想引用一个元素，因为你会#在元素上使用它。但这也对你没有帮助。Parent 在 child 之前渲染，如果 parent 由于 child 更改而从 DOM 中删除，您会偶然发现错误Expression Changed After It Has Been Checked。为此，我已经在循环中实现了 to viewChildof ，并且我们计算孩子是否有任何孩子（如果 ng-container 有任何元素）。如果它确实有孩子，我们删除父母。parentRefngAfterContentChecked

如果由于某种原因您想稍后删除父级，您可以致电removeParent()这样做。

编辑children = [1,2,3]以观察有孩子和没有孩子的影响。

<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>

@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;
      }
    }
  }
}

这是一个工作示例：https ://stackblitz.com/edit/angular-4krctv?file=src%2Fapp%2Fapp.component.html

于 2022-02-01T13:33:27.823 回答
0

如果您无法访问 ng-content 或使用您的组件的人可能输入的内容，那么您必须使用 javascript 或 CSS 对其进行验证

CSS方法：

.displayNoneWhenEmpty:empty{
  display:none;
}

<div class="displayNoneWhenEmpty">Not Empty</div>

<div class="displayNoneWhenEmpty"></div>

参考

Javascript方法：

添加一个 id 到父 div 和一个布尔检查：

<div class="parent" id="parentDivId" *ngIf="hideParent">
 <ng-content></ng-content>
</div>

然后在您的组件中添加一个布尔变量，您在构造函数中设置它

hideParent: boolean = false;
constructor(){
    hideParent = document.getElementById("parentDivId")?.childElementCount > 0;
}
于 2022-02-01T14:33:12.063 回答