Angular中能否通过内容投影向组件传递@Input对象？

你当前的写法不生效是因为<ng-content>仅负责内容投影——它只是把外部定义的组件渲染到容器内部，但投影的<app-some-table>是在app.component的上下文里初始化的，并非table-container组件。所以给<ng-content>绑定[data]="data"的操作根本不会作用到投影的表格组件上。

下面是三种可行的解决方案，按需选择：

方案1：通过ContentChild直接给投影组件赋值 #

适合只有单个投影组件的简单场景，直接在容器组件中获取表格实例并传递数据：

修改table-container.component.ts #

import { Component, Input, ContentChild, AfterContentInit, OnChanges, SimpleChanges } from '@angular/core';
import { SomeTableComponent } from './some-table.component';

@Component({
  selector: 'app-table-container',
  templateUrl: './table-container.component.html'
})
export class TableContainerComponent implements AfterContentInit, OnChanges {
  @Input() data: ITableStuff;
  @ContentChild(SomeTableComponent) someTable!: SomeTableComponent;

  ngAfterContentInit() {
    this.passDataToTable();
  }

  ngOnChanges(changes: SimpleChanges) {
    // 数据更新时同步传递给表格
    if (changes['data'] && this.someTable) {
      this.passDataToTable();
    }
  }

  private passDataToTable() {
    this.someTable.data = this.data;
  }
}

修改table-container.component.html #

不需要给<ng-content>绑定任何属性：

<!-- 容器自身需要使用data的内容 -->
<ng-content></ng-content>

方案2：用共享服务传递数据 #

适合多个组件需要共享同一数据的场景，通过服务做数据中转：

1. 创建共享服务table-data.service.ts #

import { Injectable, BehaviorSubject } from '@angular/core';
import { ITableStuff } from './table-stuff.interface';

@Injectable({ providedIn: 'root' })
export class TableDataService {
  private dataSubject = new BehaviorSubject<ITableStuff | null>(null);
  // 暴露可观察对象供表格组件订阅
  data$ = this.dataSubject.asObservable();

  updateData(data: ITableStuff) {
    this.dataSubject.next(data);
  }
}

2. 修改table-container.component.ts #

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
import { TableDataService } from './table-data.service';

@Component({
  selector: 'app-table-container',
  templateUrl: './table-container.component.html'
})
export class TableContainerComponent implements OnChanges {
  @Input() data: ITableStuff;

  constructor(private tableDataService: TableDataService) {}

  ngOnChanges(changes: SimpleChanges) {
    if (changes['data']) {
      this.tableDataService.updateData(this.data);
    }
  }
}

3. 修改some-table.component.ts #

import { Component, OnInit, OnDestroy } from '@angular/core';
import { TableDataService } from './table-data.service';
import { Subscription } from 'rxjs';
import { ITableStuff } from './table-stuff.interface';

@Component({
  selector: 'app-some-table',
  templateUrl: './some-table.component.html'
})
export class SomeTableComponent implements OnInit, OnDestroy {
  data: ITableStuff | null = null;
  private dataSub!: Subscription;

  constructor(private tableDataService: TableDataService) {}

  ngOnInit() {
    this.dataSub = this.tableDataService.data$.subscribe(data => {
      this.data = data;
    });
  }

  ngOnDestroy() {
    // 销毁时取消订阅，避免内存泄漏
    this.dataSub.unsubscribe();
  }
}

方案3：用ng-template传递上下文 #

适合需要动态渲染投影内容、传递多组上下文数据的场景，把投影内容包装成模板，由容器组件渲染并传递数据：

修改app.component.html #

把表格组件放到<ng-template>里，用let-data接收上下文数据：

<app-table-container [data]="tableData">
  <ng-template let-data>
    <app-some-table [data]="data"></app-some-table>
  </ng-template>
</app-table-container>

修改table-container.component.ts #

import { Component, Input, ContentChild, TemplateRef, ViewChild, ViewContainerRef, OnInit, OnChanges } from '@angular/core';

@Component({
  selector: 'app-table-container',
  templateUrl: './table-container.component.html'
})
export class TableContainerComponent implements OnInit, OnChanges {
  @Input() data: ITableStuff;
  @ContentChild(TemplateRef) tableTemplate!: TemplateRef<any>;
  @ViewChild('renderContainer', { read: ViewContainerRef }) renderContainer!: ViewContainerRef;

  ngOnInit() {
    this.renderTable();
  }

  ngOnChanges() {
    // 数据更新时重新渲染模板
    this.renderTable();
  }

  private renderTable() {
    this.renderContainer.clear();
    // 传递上下文数据，$implicit表示默认的上下文变量
    this.renderContainer.createEmbeddedView(this.tableTemplate, { $implicit: this.data });
  }
}

修改table-container.component.html #

添加用于渲染模板的容器：

<!-- 容器自身需要使用data的内容 -->
<div #renderContainer></div>

内容的提问来源于stack exchange，提问作者char m