时间戳

首页 > 解决方案 > Angular2 中类似 React 的组件上下文

angular - Angular2 中类似 React 的组件上下文

问题描述

我如何使用 Angular 做与 React Context API 类似的事情？例如，像这样：

<>
  <ThemeContext.Provider value="red">
    <Toolbar />
  </ThemeContext.Provider>
  <ThemeContext.Provider value="green">
    <Toolbar />
  </ThemeContext.Provider>
</>

这是一个工作示例：https ://next.plnkr.co/edit/ESWRJapMh8k9wCe9

（我为 Angular 创建了类似的样板：https ://next.plnkr.co/edit/OGnIpgnIsVC9wZXb 。您可以提供一个工作叉作为答案。）

标签： angular

解决方案

真的我不知道你想达到什么目的。所以我抛出三个想法

在 Angular 中，组件可以使用@Host在构造函数中获取他的“父级”

constructor(@Optional() @Host()parent:ParentComponent){}

然后，您可以访问“ParentComponent”的所有属性 - 父级可以是祖父级

如果你只想使用类总是可以在styles.css中定义一个css的方式（记住styles.css是为所有应用程序共享的-是你在angular.json中使用的文件-）

.red button
{
  color:red
}
.green button
{
  color:green
}

另一个想法是您的父组件使用ng-content

推荐阅读