Javascript 深嵌套的ngcontainer元素仍然可以在Angular 布局组件中正确渲染内容吗

在我的Angular应用程序中，我使用CSS开发了一个具有两列的布局组件.在这个布局组件中，我使用ng-content定义了旁边和主要内容的占位符.

旁边和主要部分的数据从服务器获取.在加载阶段，设置loading标志以指示正在获取数据.成功检索数据后，将从观察对象中返回isSuccess标志和响应.

为了模拟这种行为，我使用RxJS中的of操作符创建了一个模拟data$观察对象.该可观察结果包括模拟同步数据检索过程的延迟.

布局没有正确呈现旁白和主要内容.出现这个问题是因为ng-content指令直接期望属性aside和main，但它们深深地嵌套在ng-container中.

问题是，可以修改此设置以正确呈现内容吗？

以下是修改后的代码:

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { delay, of, startWith } from 'rxjs';
import 'zone.js';

@Component({
  selector: 'layout',
  standalone: true,
  template: `
    <div class="container">
      <aside>
        <ng-content select="[aside]"></ng-content>
      </aside>
      <main>
        <ng-content select="[main]"></ng-content>
      </main>
    </div>
  `,
  styles: [`.container {display:grid; grid-template-columns: 1fr 2fr} `],
})
export class LayoutComponent {}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [LayoutComponent, CommonModule],
  template: `
    <layout>
      <ng-container *ngIf="data$ | async as result">
        <div *ngIf="result.loading">loading...</div>
        <ng-container *ngIf="result.isSuccess">
          <div aside>aside content: {{ result.response.aside | json }}</div>
          <div main>main content: {{ result.response.main | json }}</div>
        </ng-container>
      </ng-container>
    </layout>
  `,
})
export class App {
  data$ = of<any>({
    response: { aside: [1, 2, 3, 4], main: [10, 12, 13, 14] },
    isSuccess: true,
  }).pipe(delay(1 * 1000), startWith({ loading: true }));
}

bootstrapApplication(App);

这是代码的链接:StackBlitz