ng-content 不显示具有主机属性的组件

Question

我试图理解为什么 ng-content 不显示具有主机属性的组件。

如果检查生成的 HTML DOM，该属性存在于主机标记中，但 ng-content 没有任何子级。

位置面板.组件

@Component({
    selector: "position-panel",
    standalone: true,
    imports: [],
    template: `
        <div class="position-panel-component">
            <div class="start-content">
                <ng-content select="[start-region]"></ng-content>
            </div>
            <div class="middle-content">
                <ng-content select="[middle-region]"></ng-content>
            </div>
            <div class="end-content">
                <ng-content select="[end-region]"></ng-content>
            </div>
        </div>
    `,
    styles: `
        .position-panel-component {
            display: flex;
            height: 100%;
            justify-content: space-between;
            width: 100%;

            > .start-content,
            > .middle-content,
            > .end-content {
                display: flex;
                height: 100%;
                justify-content: space-between;
                width: 100%;
            }

            > .start-content {
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;
            }

            > .middle-content {
                flex-direction: row;
                justify-content: center;
                align-items: center;
            }

            > .end-content {
                flex-direction: row;
                justify-content: end;
                align-items: center;
            }

        }
    `
})
export class PositionPanelComponent {}

位置中间.组件

@Component({
    selector: "position-middle",
    standalone: true,
    imports: [],
    template: `<ng-content></ng-content>`,
    host: {
        "middle-region": "",
    },
})
export class PositionMiddleComponent {}

home.组件

@Component({
    selector: "home",
    standalone: true,
    imports: [],
    template: `
        <div class="header-bar">
            <position-panel>
                <ng-container start-region> <!-- This works and displays -->
                    <button>Start 1</button>
                    <button>Start 2</button>
                    <button>Start 3</button>
                </ng-container>
                <position-middle> <!-- This doesn't work and doesn't display! In the DOM <div class="middle-content"> of position-panel is generated without children -->
                    <button>Middle 1</button>
                    <button>Middle 2</button>
                    <button>Middle 3</button>
                </position-middle>
                <div end-region> <!-- This works and displays -->
                    <button>End 1</button>
                    <button>End 2</button>
                    <button>End 3</button>
                </div>
            </position-panel>


            <!-- In the DOM position-middle is generated with the middle-region attribute -->
            <position-middle> 
                 <button>Middle 1</button>
                <button>Middle 2</button>
                <button>Middle 3</button>
            </position-middle>

        </div>
    `
})
export class HomeComponent {}

在位置中间组件中，我已经尝试以不同的方式将属性分配给主机标签，但没有一个起作用

host: {
    "[attr.middle-region]": "", // I receive error: AssertionError: Unsupported reification of ir.Expression kind: EmptyExpr
},
hostDirectives: [
    PositionMiddleDirective // The middle-region attribute is simply not generated in the DOM       
]

Answer 1

我尝试了你的示例，我所要做的就是将属性

middle-region

添加到

position-middle

元素，效果非常好！

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { PositionPanelComponent } from './app/position-panel/position-panel.component';
import { PositionMiddleComponent } from './app/position-middle/position-middle.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [PositionPanelComponent, PositionMiddleComponent],
  template: `
  <div class="header-bar">
      <position-panel>
          <ng-container start-region> <!-- This works and displays -->
              <button>Start 1</button>
              <button>Start 2</button>
              <button>Start 3</button>
          </ng-container>
          <position-middle middle-region> <!-- changed here! -->
              <button>Middle 1</button>
              <button>Middle 2</button>
              <button>Middle 3</button>
          </position-middle>
          <div end-region> <!-- This works and displays -->
              <button>End 1</button>
              <button>End 2</button>
              <button>End 3</button>
          </div>
      </position-panel>


      <!-- In the DOM position-middle is generated with the middle-region attribute -->
      <position-middle> 
           <button>Middle 1</button>
          <button>Middle 2</button>
          <button>Middle 3</button>
      </position-middle>

  </div>
  `,
})
export class App {
  name = 'Angular';
}

bootstrapApplication(App);

Stackblitz 演示