如何将组件输入到 Angular 中的另一个组件？答案

【问题标题】：How to input a component into another component in Angular?如何将组件输入到 Angular 中的另一个组件？
【发布时间】：2023-01-12 01:24:36
【问题描述】：

在 React 中，您可以将整个组件传递给其他组件，然后轻松地将这些组件显示在各自的 div 中。这指的不是导入，而是函数参数，因此显示的内容会有所不同。

在 Angular 中，您可以使用 @Input() 和 @Output() 对值和函数执行相同的操作，但是组件呢？你如何使用组件来做到这一点？我不是在谈论由模块文件或文件顶部处理的导入；我说的是根据程序的运行时间而变化的参数。

即，我想将以下 React 代码转换为 Angular，其中 children 是通过 ReactNode 传入的另一个 React 组件：

const ReactComponent = (props) => {
  return (
    <div>
      {props.children}
    </div>
  );
};

如果我的术语不正确，我也深表歉意；我是 Angular 的新手，我来自（有限的）React 背景。

我尝试将 @Input() 与类型为“any”的参数一起使用，但这似乎不正确。

【问题讨论】：

您是否有兴趣呈现“初始化组件”，即您已经向其提供了 @Input() 数据并且只是希望将其放置在屏幕上某处的组件的封装实例？或者你想要一个“组件引用”，你将负责实际为组件提供来自子组件的数据？ ViewContainerRef.createComponent() 可能就是你要找的 angular.io/api/core/ViewContainerRef angular.io/guide/dynamic-component-loader
@nate-kumar 我想我只是想要参考，但我可能是错的；我不得不将 React 代码转换为 Angular，这有时非常令人困惑。原始代码（不是我的）似乎只是一个包装器，所以我正在尝试重新创建它。

标签： javascript reactjs angular

【解决方案1】：

parent.component.html
<div>
   <child-component></child-component>
</div>

child.component.ts
@Component({ selector: 'child-component' })
export class ChildComponent {}

这是展示 Angular 组件如何嵌套的一种非常快速的方法。在此示例中，您有一个父组件模板文件 (parent.component.html)，在此文件中，您可以通过其选择器包含任何其他组件。在示例中，我包含“子组件”并显示子组件 ts 文件。

【讨论】：

我明白这一点，但我要求的是一种让子组件动态的方法。在这种情况下，输入使用@Input()。