小编noi*_*euq的帖子

请考虑以下HTML:

<select value="val2">
  <option value="val1">o1</option>
  <option value="val2">o2</option>
</select>

和JavaScript(在文档准备就绪):

var $select = $('select');
var select = $select.get(0);

function logger(msg) {
    return function () { console.log(msg); };
}

$select.on('change', logger('jquery on select'));
$(document).on('change', logger('jquery on document'));

select.addEventListener('change', logger('native on select'), false);
document.addEventListener('change', logger('native on document'), false);

setTimeout(function () {
    console.log(' == programmatic ==');
    $select.trigger('change');
    console.log(' == now try manual ==');
}, 1000);

这导致控制台中的以下输出:

 == programmatic ==
jquery on select
jquery on document
 == now try manual ==
jquery on select
native …

我如何使用 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。您只需提供一个工作叉作为答案即可。）