Question

我可以将字符串或数字设置为组件的输入：

@Input('name') name: string;

并在HTML文件中使用它：

<div>{{name}}</div>

但是我想设置一个 component 而不是字符串，例如name

换句话说：如何为另一个组件的输入设置一个组件？

Answer 1

要在另一个组件中嵌入元素或组件，可以像这样使用ng-content：

@Component({
  selector: 'outer-CMP',
  template: `
    <div> </div>
    <ng-content></ng-content>
  `,
  styleUrls: [....]
})
export class OuterInputComponent {

}

然后：

@Component({
  selector: 'inner-CMP',
  template: `
    <div> </div>

  `,
  styleUrls: [....]
})
export class InnerInputComponent {

}

使用：

<outer-CMP> 
        <inner-CMP>
        </inner-CMP>
</outer-CMP>

Answer 2

您不会为此使用input，而需要将内容投射与ContentChild一起使用。

示例取自Angular Docs：

@Component({
  selector: 'example-app',
  template: `
    <tab>
      <pane id="1" *ngIf="shouldShow"></pane>
      <pane id="2" *ngIf="!shouldShow"></pane>
    </tab>

    <button (click)="toggle()">Toggle</button>
  `,
})
export class ContentChildComp {
  shouldShow = true;

  toggle() { this.shouldShow = !this.shouldShow; }
}

pane组件投影在tabs组件中。

@Component({
  selector: 'tab',
  template: `
    <div>pane: {{pane?.id}}</div>
  `
})
export class Tab {
  @ContentChild(Pane, {static: false}) pane !: Pane;
}

您可以使用pane来访问tab组件内的@ContentChild组件。

有关content projection的完整指南

组件如何获取另一个组件作为输入？

2 个答案: