Как узнать список всех поддерживаемых свойств html для привязки к

Question

Как я понимаю, Angular попытался обработать каждый элемент HTML DOM как компонент и разрешить привязку к его свойствам. Так что, если я смотрю на HTMLDivElement классе я могу видеть, что он наследует textContent свойства от Node и innerHTML от Element, так что я могу связать с этими свойствами:

<div [textContent]="text"></div> 
<div [innerHTML]="html"></div> 

Это прекрасно работает, но HTMLDivElement имеет кучу других свойства. Как узнать, к каким другим свойствам я могу привязываться? Может быть, есть интерфейс, объявленный в источниках, который определяет свойства для привязки?

То же самое относится к списку событий, поддерживаемому элементом. Я понимаю, что часто используются такие события, как click и blur. Но есть много других событий. Например, MDN показывает contextmenu событие, доступное в DIV. Я проверил, и я могу подписаться на него. Но могу ли я сделать это для всех событий, доступных на HTMLDivElement?

Answer 1

Существует некоторая схема, которая имеет угловые опоры.

https://github.com/angular/angular/blob/2.4.6/modules/%40angular/compiler/src/schema/dom_element_schema_registry.ts#L78-L240

const SCHEMA: 
    string[] = 
     [ 
      '[Element]|textContent,%classList,className,id,innerHTML,*beforecopy,*beforecut,*beforepaste,*copy,*cut,*paste,*search,*selectstart,*webkitfullscreenchange,*webkitfullscreenerror,*wheel,outerHTML,#scrollLeft,#scrollTop', 
      '[HTMLElement]^[Element]|accessKey,contentEditable,dir,!draggable,!hidden,innerText,lang,*abort,*beforecopy,*beforecut,*beforepaste,*blur,*cancel,*canplay,*canplaythrough,*change,*click,*close,*contextmenu,*copy,*cuechange,*cut,*dblclick,*drag,*dragend,*dragenter,*dragleave,*dragover,*dragstart,*drop,*durationchange,*emptied,*ended,*error,*focus,*input,*invalid,*keydown,*keypress,*keyup,*load,*loadeddata,*loadedmetadata,*loadstart,*message,*mousedown,*mouseenter,*mouseleave,*mousemove,*mouseout,*mouseover,*mouseup,*mousewheel,*mozfullscreenchange,*mozfullscreenerror,*mozpointerlockchange,*mozpointerlockerror,*paste,*pause,*play,*playing,*progress,*ratechange,*reset,*resize,*scroll,*search,*seeked,*seeking,*select,*selectstart,*show,*stalled,*submit,*suspend,*timeupdate,*toggle,*volumechange,*waiting,*webglcontextcreationerror,*webglcontextlost,*webglcontextrestored,*webkitfullscreenchange,*webkitfullscreenerror,*wheel,outerText,!spellcheck,%style,#tabIndex,title,!translate', 
      'abbr,address,article,aside,b,bdi,bdo,cite,code,dd,dfn,dt,em,figcaption,figure,footer,header,i,kbd,main,mark,nav,noscript,rb,rp,rt,rtc,ruby,s,samp,section,small,strong,sub,sup,u,var,wbr^[HTMLElement]|accessKey,contentEditable,dir,!draggable,!hidden,innerText,lang,*abort,*beforecopy,*beforecut,*beforepaste,*blur,*cancel,*canplay,*canplaythrough,*change,*click,*close,*contextmenu,*copy,*cuechange,*cut,*dblclick,*drag,*dragend,*dragenter,*dragleave,*dragover,*dragstart,*drop,*durationchange,*emptied,*ended,*error,*focus,*input,*invalid,*keydown,*keypress,*keyup,*load,*loadeddata,*loadedmetadata,*loadstart,*message,*mousedown,*mouseenter,*mouseleave,*mousemove,*mouseout,*mouseover,*mouseup,*mousewheel,*mozfullscreenchange,*mozfullscreenerror,*mozpointerlockchange,*mozpointerlockerror,*paste,*pause,*play,*playing,*progress,*ratechange,*reset,*resize,*scroll,*search,*seeked,*seeking,*select,*selectstart,*show,*stalled,*submit,*suspend,*timeupdate,*toggle,*volumechange,*waiting,*webglcontextcreationerror,*webglcontextlost,*webglcontextrestored,*webkitfullscreenchange,*webkitfullscreenerror,*wheel,outerText,!spellcheck,%style,#tabIndex,title,!translate', 
      'media^[HTMLElement]|!autoplay,!controls,%crossOrigin,#currentTime,!defaultMuted,#defaultPlaybackRate,!disableRemotePlayback,!loop,!muted,*encrypted,#playbackRate,preload,src,%srcObject,#volume', 
      ':svg:^[HTMLElement]|*abort,*blur,*cancel,*canplay,*canplaythrough,*change,*click,*close,*contextmenu,*cuechange,*dblclick,*drag,*dragend,*dragenter,*dragleave,*dragover,*dragstart,*drop,*durationchange,*emptied,*ended,*error,*focus,*input,*invalid,*keydown,*keypress,*keyup,*load,*loadeddata,*loadedmetadata,*loadstart,*mousedown,*mouseenter,*mouseleave,*mousemove,*mouseout,*mouseover,*mouseup,*mousewheel,*pause,*play,*playing,*progress,*ratechange,*reset,*resize,*scroll,*seeked,*seeking,*select,*show,*stalled,*submit,*suspend,*timeupdate,*toggle,*volumechange,*waiting,%style,#tabIndex', 
      ':svg:graphics^:svg:|', 
      ':svg:animation^:svg:|*begin,*end,*repeat', 
      ':svg:geometry^:svg:|', 
      ':svg:componentTransferFunction^:svg:|', 
      ':svg:gradient^:svg:|', 
      ':svg:textContent^:svg:graphics|', 
      ':svg:textPositioning^:svg:textContent|', 
      'a^[HTMLElement]|charset,coords,download,hash,host,hostname,href,hreflang,name,password,pathname,ping,port,protocol,referrerPolicy,rel,rev,search,shape,target,text,type,username', 
      'area^[HTMLElement]|alt,coords,hash,host,hostname,href,!noHref,password,pathname,ping,port,protocol,referrerPolicy,search,shape,target,username', 
      'audio^media|', 
      'br^[HTMLElement]|clear', 
      'base^[HTMLElement]|href,target', 
      'body^[HTMLElement]|aLink,background,bgColor,link,*beforeunload,*blur,*error,*focus,*hashchange,*languagechange,*load,*message,*offline,*online,*pagehide,*pageshow,*popstate,*rejectionhandled,*resize,*scroll,*storage,*unhandledrejection,*unload,text,vLink', 
      'button^[HTMLElement]|!autofocus,!disabled,formAction,formEnctype,formMethod,!formNoValidate,formTarget,name,type,value', 
      'canvas^[HTMLElement]|#height,#width', 
      'content^[HTMLElement]|select', 
      'dl^[HTMLElement]|!compact', 
      'datalist^[HTMLElement]|', 
      'details^[HTMLElement]|!open', 
      'dialog^[HTMLElement]|!open,returnValue', 
      'dir^[HTMLElement]|!compact', 
      'div^[HTMLElement]|align', 
      'embed^[HTMLElement]|align,height,name,src,type,width', 
      'fieldset^[HTMLElement]|!disabled,name', 
      'font^[HTMLElement]|color,face,size', 
      'form^[HTMLElement]|acceptCharset,action,autocomplete,encoding,enctype,method,name,!noValidate,target', 
      'frame^[HTMLElement]|frameBorder,longDesc,marginHeight,marginWidth,name,!noResize,scrolling,src', 
      'frameset^[HTMLElement]|cols,*beforeunload,*blur,*error,*focus,*hashchange,*languagechange,*load,*message,*offline,*online,*pagehide,*pageshow,*popstate,*rejectionhandled,*resize,*scroll,*storage,*unhandledrejection,*unload,rows', 
      'hr^[HTMLElement]|align,color,!noShade,size,width', 
      'head^[HTMLElement]|', 
      'h1,h2,h3,h4,h5,h6^[HTMLElement]|align', 
      'html^[HTMLElement]|version', 
      'iframe^[HTMLElement]|align,!allowFullscreen,frameBorder,height,longDesc,marginHeight,marginWidth,name,referrerPolicy,%sandbox,scrolling,src,srcdoc,width', 
      'img^[HTMLElement]|align,alt,border,%crossOrigin,#height,#hspace,!isMap,longDesc,lowsrc,name,referrerPolicy,sizes,src,srcset,useMap,#vspace,#width', 
      'input^[HTMLElement]|accept,align,alt,autocapitalize,autocomplete,!autofocus,!checked,!defaultChecked,defaultValue,dirName,!disabled,%files,formAction,formEnctype,formMethod,!formNoValidate,formTarget,#height,!incremental,!indeterminate,max,#maxLength,min,#minLength,!multiple,name,pattern,placeholder,!readOnly,!required,selectionDirection,#selectionEnd,#selectionStart,#size,src,step,type,useMap,value,%valueAsDate,#valueAsNumber,#width', 
      'keygen^[HTMLElement]|!autofocus,challenge,!disabled,keytype,name', 
      'li^[HTMLElement]|type,#value', 
      'label^[HTMLElement]|htmlFor', 
      'legend^[HTMLElement]|align', 
      'link^[HTMLElement]|as,charset,%crossOrigin,!disabled,href,hreflang,integrity,media,rel,%relList,rev,%sizes,target,type', 
      'map^[HTMLElement]|name', 
      'marquee^[HTMLElement]|behavior,bgColor,direction,height,#hspace,#loop,#scrollAmount,#scrollDelay,!trueSpeed,#vspace,width', 
      'menu^[HTMLElement]|!compact', 
      'meta^[HTMLElement]|content,httpEquiv,name,scheme', 
      'meter^[HTMLElement]|#high,#low,#max,#min,#optimum,#value', 
      'ins,del^[HTMLElement]|cite,dateTime', 
      'ol^[HTMLElement]|!compact,!reversed,#start,type', 
      'object^[HTMLElement]|align,archive,border,code,codeBase,codeType,data,!declare,height,#hspace,name,standby,type,useMap,#vspace,width', 
      'optgroup^[HTMLElement]|!disabled,label', 
      'option^[HTMLElement]|!defaultSelected,!disabled,label,!selected,text,value', 
      'output^[HTMLElement]|defaultValue,%htmlFor,name,value', 
      'p^[HTMLElement]|align', 
      'param^[HTMLElement]|name,type,value,valueType', 
      'picture^[HTMLElement]|', 
      'pre^[HTMLElement]|#width', 
      'progress^[HTMLElement]|#max,#value', 
      'q,blockquote,cite^[HTMLElement]|', 
      'script^[HTMLElement]|!async,charset,%crossOrigin,!defer,event,htmlFor,integrity,src,text,type', 
      'select^[HTMLElement]|!autofocus,!disabled,#length,!multiple,name,!required,#selectedIndex,#size,value', 
      'shadow^[HTMLElement]|', 
      'source^[HTMLElement]|media,sizes,src,srcset,type', 
      'span^[HTMLElement]|', 
      'style^[HTMLElement]|!disabled,media,type', 
      'caption^[HTMLElement]|align', 
      'th,td^[HTMLElement]|abbr,align,axis,bgColor,ch,chOff,#colSpan,headers,height,!noWrap,#rowSpan,scope,vAlign,width', 
      'col,colgroup^[HTMLElement]|align,ch,chOff,#span,vAlign,width', 
      'table^[HTMLElement]|align,bgColor,border,%caption,cellPadding,cellSpacing,frame,rules,summary,%tFoot,%tHead,width', 
      'tr^[HTMLElement]|align,bgColor,ch,chOff,vAlign', 
      'tfoot,thead,tbody^[HTMLElement]|align,ch,chOff,vAlign', 
      'template^[HTMLElement]|', 
      'textarea^[HTMLElement]|autocapitalize,!autofocus,#cols,defaultValue,dirName,!disabled,#maxLength,#minLength,name,placeholder,!readOnly,!required,#rows,selectionDirection,#selectionEnd,#selectionStart,value,wrap', 
      'title^[HTMLElement]|text', 
      'track^[HTMLElement]|!default,kind,label,src,srclang', 
      'ul^[HTMLElement]|!compact,type', 
      'unknown^[HTMLElement]|', 
      'video^media|#height,poster,#width', 
      ':svg:a^:svg:graphics|', 
      ':svg:animate^:svg:animation|', 
      ':svg:animateMotion^:svg:animation|', 
      ':svg:animateTransform^:svg:animation|', 
      ':svg:circle^:svg:geometry|', 
      ':svg:clipPath^:svg:graphics|', 
      ':svg:cursor^:svg:|', 
      ':svg:defs^:svg:graphics|', 
      ':svg:desc^:svg:|', 
      ':svg:discard^:svg:|', 
      ':svg:ellipse^:svg:geometry|', 
      ':svg:feBlend^:svg:|', 
      ':svg:feColorMatrix^:svg:|', 
      ':svg:feComponentTransfer^:svg:|', 
      ':svg:feComposite^:svg:|', 
      ':svg:feConvolveMatrix^:svg:|', 
      ':svg:feDiffuseLighting^:svg:|', 
      ':svg:feDisplacementMap^:svg:|', 
      ':svg:feDistantLight^:svg:|', 
      ':svg:feDropShadow^:svg:|', 
      ':svg:feFlood^:svg:|', 
      ':svg:feFuncA^:svg:componentTransferFunction|', 
      ':svg:feFuncB^:svg:componentTransferFunction|', 
      ':svg:feFuncG^:svg:componentTransferFunction|', 
      ':svg:feFuncR^:svg:componentTransferFunction|', 
      ':svg:feGaussianBlur^:svg:|', 
      ':svg:feImage^:svg:|', 
      ':svg:feMerge^:svg:|', 
      ':svg:feMergeNode^:svg:|', 
      ':svg:feMorphology^:svg:|', 
      ':svg:feOffset^:svg:|', 
      ':svg:fePointLight^:svg:|', 
      ':svg:feSpecularLighting^:svg:|', 
      ':svg:feSpotLight^:svg:|', 
      ':svg:feTile^:svg:|', 
      ':svg:feTurbulence^:svg:|', 
      ':svg:filter^:svg:|', 
      ':svg:foreignObject^:svg:graphics|', 
      ':svg:g^:svg:graphics|', 
      ':svg:image^:svg:graphics|', 
      ':svg:line^:svg:geometry|', 
      ':svg:linearGradient^:svg:gradient|', 
      ':svg:mpath^:svg:|', 
      ':svg:marker^:svg:|', 
      ':svg:mask^:svg:|', 
      ':svg:metadata^:svg:|', 
      ':svg:path^:svg:geometry|', 
      ':svg:pattern^:svg:|', 
      ':svg:polygon^:svg:geometry|', 
      ':svg:polyline^:svg:geometry|', 
      ':svg:radialGradient^:svg:gradient|', 
      ':svg:rect^:svg:geometry|', 
      ':svg:svg^:svg:graphics|#currentScale,#zoomAndPan', 
      ':svg:script^:svg:|type', 
      ':svg:set^:svg:animation|', 
      ':svg:stop^:svg:|', 
      ':svg:style^:svg:|!disabled,media,title,type', 
      ':svg:switch^:svg:graphics|', 
      ':svg:symbol^:svg:|', 
      ':svg:tspan^:svg:textPositioning|', 
      ':svg:text^:svg:textPositioning|', 
      ':svg:textPath^:svg:textContent|', 
      ':svg:title^:svg:|', 
      ':svg:use^:svg:graphics|', 
      ':svg:view^:svg:|#zoomAndPan', 
      'data^[HTMLElement]|value', 
      'menuitem^[HTMLElement]|type,label,icon,!disabled,!checked,radiogroup,!default', 
      'summary^[HTMLElement]|', 
      'time^[HTMLElement]|dateTime', 
     ]; 

const _ATTR_TO_PROP: {[name: string]: string} = { 
    'class': 'className', 
    'for': 'htmlFor', 
    'formaction': 'formAction', 
    'innerHtml': 'innerHTML', 
    'readonly': 'readOnly', 
    'tabindex': 'tabIndex', 
}; 

где

Каждый элемент имеет набор свойств, разделенных запятыми (,). Каждое свойства может быть приставкой специальным символом, обозначающим его типа:

* - (no prefix): property is a string. 
* - `*`: property represents an event. 
* - `!`: property is a boolean. 
* - `#`: property is a number. 
* - `%`: property is an object. 

Answer 2

Проще говоря

[] - означает вход компонента

() - выход из компонента или лучшего названия было бы событие

[()] - два способа связывания (но я бы рекомендовал, чтобы избежать его, как много по возможности, смотрите Forms)

Более сложный Template syntax. Поскольку это зависит от некоторых свойств, можно определить как входные параметры для компонента, некоторые свойства могут быть директивами и т. Д.