Question

在我的有角度的应用程序中，我在根元素中始终有一个组件。例如：

<foo></foo>

此组件具有“显示”方法，可用于显示该组件。我希望能够从项目的任何组件中获得对该组件的引用，以便能够从任何地方显示“ foo”组件。我知道我可以使用服务来做到这一点，但是我更希望能够将对该组件的引用注入其他组件。像这样：

export class MyComponent {
   constructor(private _foo: FooComponent) {}
}

是否可以用Angular做类似的事情？

Answer 1

不，您不能像服务一样注入组件。组件不可注射。

您可以使用@ViewChild获得对该组件的引用。但只能来自包含该组件的任何组件。

更新：

如果您需要为组件设置一些设置信息，而它不是子组件（带有选择器的子组件嵌套在父组件中），那么您的下一个最佳选择就是服务。

>

您可以构建服务并将其注入到两个组件中。在一个组件中，您可以设置任何初始化和设置值。在另一个组件中，您可以在设置组件时读取这些值。

如果只需要隐藏或显示组件，则可以考虑的另一种选择是拥有两个不同的组件，一个带有<foo></foo>，另一个没有<foo>。然后，您可以将其他组件路由到包含<foo>或不包含<foo>的页面，而不用打开和关闭它。

这是我的意思的图片。在我的情况下，<foo>是我的菜单组件。

我的应用程序组件的路由器出口是整个页面。我在那里路由不需要的菜单（例如登录页面）。

我的外壳组件具有菜单和路由器出口。我在那里路由任何我想显示菜单的地方。