主页 / coding / 问题 / 78913406
Accepted
Fred2020
Asked: 2024-08-26 16:06:43 +0800 CST

子组件中多个类似命名的条件 ng-content 未投影

  • 772

我首先有一个看起来像这样的父/子组件

父母

<child-comp>
  <div firstContent>This is my first content</div>
  <div secondContent>This is my second content</div>
</child-comp>

孩子

<div redColourDirective> 
  <div>This is the template with directive applied</div>
  <ng-content select="[firstContent]"></ng-content>
  <ng-content select="[secondContent]"></ng-content>
</div>

...然后我希望指令redColourDirective是有条件的，所以模板变成了这样（主要是因为我不能有条件指令）

<ng-container *ngTemplateOutlet="withDirective() ? tmp1 : tmp2"> </ng-container>
<ng-template #tmp1>
  <div redColourDirective>
    <div>This is the template with directive applied</div>
    <ng-content select="[firstContent]"></ng-content>
    <ng-content select="[secondContent]"></ng-content>
  </div>
</ng-template>
<ng-template #tmp2>
  <div>
    <div>This is the template WITHOUT directive applied</div>
    <ng-content select="[firstContent]"></ng-content>
    <ng-content select="[secondContent]"></ng-content>
  </div>
</ng-template>

...其中withDirective()是作为输入的信号。现在，当 withDirective 从父组件设置为 true 时，firstContent、secondContent 会投射到子组件中，但当 withDirective 设置为 false 时则不会。我在这里做错了什么？

//works, ng-content visible
<child-comp [withDirective]="true">
  <div firstContent>This is my first content</div>
  <div secondContent>This is my second content</div>
</child-comp>

//fails, no ng-content visible
<child-comp [withDirective]="false">
  <div firstContent>This is my first content</div>
  <div secondContent>This is my second content</div>
</child-comp>

我尝试过的方法： Stackblitz 演示

angular

1 个回答

  1. Best Answer

    不建议在条件或循环内使用 ng-content -文档参考

    事实上，我认为 ng-content 仅在动态渲染时抓取两个插槽，这是代码的问题。

    即使您尝试将指令添加到两个条件中，它也不会呈现，因此指令不是问题的根本原因。

    使用*ngTemplateOutlet可以渲染模板的 来代替ng-content是一种更好的方法。

    子组件.html

    <ng-container *ngTemplateOutlet="withDirective() ? tmp1 : tmp2"> </ng-container>
<ng-template #tmp1>
  <div redColourDirective>
    <div>This is the template with directive applied</div>
    <ng-container *ngTemplateOutlet="firstContent()"></ng-container>
    <ng-container *ngTemplateOutlet="secondContent()"></ng-container>
  </div>
</ng-template>
<ng-template #tmp2>
  <div>
    <div>This is the template WITHOUT directive applied</div>
    <ng-container *ngTemplateOutlet="firstContent()"></ng-container>
    <ng-container *ngTemplateOutlet="secondContent()"></ng-container>
  </div>
</ng-template>

    接下来，我们传入ng-templates，它将包含您希望动态呈现的内容，代替 div。

    应用程序.组件.html

    <child-comp [withDirective]="false">
  <ng-template #firstContent>This is my first content</ng-template>
  <ng-template #secondContent>This is my second content</ng-template>
</child-comp>
<hr />
<child-comp [withDirective]="true">
  <ng-template #firstContent>This is my first content</ng-template>
  <ng-template #secondContent>This is my second content</ng-template>
</child-comp>

    最后，我们使用信号访问该模板并使其可供子 HTML 使用contentChild。

    子组件

    import { Component, input, output, signal, contentChild } from '@angular/core';
import { Action } from './models';
import { NgTemplateOutlet } from '@angular/common';
import { RedColourDirective } from './colour-directive';

@Component({
  selector: 'child-comp',
  templateUrl: './child.component.html',
  standalone: true,
  imports: [NgTemplateOutlet, RedColourDirective],
})
export class ChildComponent {
  firstContent: any = contentChild('firstContent');
  secondContent: any = contentChild('firstContent');
  withDirective = input<boolean>();

  constructor() {}
}

    Stackblitz 演示

    • 1

相关问题