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

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

@Input('name') name: string;

并在HTML文件中使用它：

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

{{name}

但是我想设置一个组件而不是字符串，比如

名称

---

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

如果不使用

输入

，则需要使用内容投影

来自Angular Docs的示例：

@组件({
选择器：“示例应用程序”，
模板：`
切换
`,
})
导出类ContentChildComp{
shouldShow=true；
toggle（）{this.shouldShow=！this.shouldShow；}
}

窗格

组件投影在

选项卡

组件中

@组件({
选择器：“制表符”，
模板：`
窗格：{{pane？.id}
`
})
导出类选项卡{
@ContentChild（窗格，{static:false}）窗格！：窗格；
}

您可以使用

@ContentChild

访问

选项卡中的
窗格
组件

关于
的完整指南如果您不想使用

输入，则需要使用内容投影

来自Angular Docs的示例：

@组件({
选择器：“示例应用程序”，
模板：`
切换
`,
})
导出类ContentChildComp{
shouldShow=true；
toggle（）{this.shouldShow=！this.shouldShow；}
}

窗格

组件投影在

选项卡

组件中

@组件({
选择器：“制表符”，
模板：`
窗格：{{pane？.id}
`
})
导出类选项卡{
@ContentChild（窗格，{static:false}）窗格！：窗格；
}

您可以使用

@ContentChild

访问

选项卡中的
窗格
组件

有关在另一个组件中嵌入元素或组件的完整指南，您可以像这样使用
ng content
：

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

}

@组件({
选择器：“外部CMP”，
模板：`
`,
样式URL:[…]
})
导出类OuterInputComponent{
}

然后：

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

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

}

@组件({
选择器：“内部CMP”，
模板：`
`,
样式URL:[…]
})
导出类InnerInputComponent{
}

使用：

要在另一个组件中嵌入元素或组件，您可以使用
ng content
如下所示：

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

}

@组件({
选择器：“外部CMP”，
模板：`
`,
样式URL:[…]
})
导出类OuterInputComponent{
}

然后：

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

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

}

@组件({
选择器：“内部CMP”，
模板：`
`,
样式URL:[…]
})
导出类InnerInputComponent{
}

使用：


您的要求是什么？从问题中不清楚您在问什么。如果您想在另一个组件中加载组件，您可以尝试使用
ng content
您不能使用组件进行输入，但可以将组件放入模板中，模板可以传递到Input中。实际上，您可以通过
Input
绑定组件，但不是为了呈现它。您的要求是什么？从问题中不清楚您在问什么。如果您想在另一个组件中加载组件，您可以尝试使用
ng content
您不能使用组件进行输入，但可以将组件放入模板中，模板可以传递到Input中。实际上，您可以通过
Input
绑定组件，但不是为了呈现它。