自定义指令的路径:
C:\Code\SPA\spartacus\projects\storefrontlib\src\cms-structure\page\component\component-wrapper.directive.ts
指令的选择器:cxComponentWrapper
只有5个文件里用到了,似乎应用不是很广泛:
html源代码:
<button (click)="toggle($event)">隐藏/显示</button>
注意这个(click)的语法和Angularjs不一样:ng-click
点击之后:
我在Angular Component html里的表达式toggle($event),实际的实现是一个template button listener:
/**
* Wraps an event listener with a function that marks ancestors dirty and prevents default behavior,
* if applicable.
*
* @param {?} tNode The TNode associated with this listener
* @param {?} lView The LView that contains this listener
* @param {?} listenerFn The listener function to call
* @param {?} wrapWithPreventDefault Whether or not to prevent default behavior
* (the procedural renderer does this already, so in those cases, we should skip)
* @return {?}
*/
function wrapListener(tNode, lView, listenerFn, wrapWithPreventDefault) {
// Note: we are performing most of the work in the listener function itself
// to optimize listener registration.
return (/**
* @param {?} e
* @return {?}
*/
function wrapListenerIn_markDirtyAndPreventDefault(e) {
// Ivy uses `Function` as a special token that allows us to unwrap the function
// so that it can be invoked programmatically by `DebugNode.triggerEventHandler`.
if (e === Function) {
return listenerFn;
}
// In order to be backwards compatible with View Engine, events on component host nodes
// must also mark the component view itself dirty (i.e. the view that it owns).
/** @type {?} */
const startView = tNode.flags & 2 /* isComponentHost */ ?
getComponentLViewByIndex(tNode.index, lView) :
lView;
// See interfaces/view.ts for more on LViewFlags.ManualOnPush
if ((lView[FLAGS] & 32 /* ManualOnPush */) === 0) {
markViewDirty(startView);
}
/** @type {?} */
let result = executeListenerWithErrorHandling(lView, listenerFn, e);
要获取更多Jerry的原创文章,请关注公众号"汪子熙":