Angular |的组件架构，作者:Alain Chautardbetway必威滚球</标题><link data-rh="true" id="glyph_preload_link" rel="preload" as="style" type="text/css" href="https://glyph.medium.com/css/unbound.css"> <link data-rh="true" id="glyph_link" rel="stylesheet" type="text/css" href="https://glyph.medium.com/css/unbound.css"> <style type="text/css" data-fela-rehydration="493" data-fela-type="STATIC">html{box-sizing:border-box;-webkit-text-size-adjust:100%}*, *:before, *:after{box-sizing:inherit}body{margin:0;padding:0;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:rgba(0,0,0,0.8);position:relative;min-height:100vh}h1, h2, h3, h4, h5, h6, dl, dd, ol, ul, menu, figure, blockquote, p, pre, form{margin:0}menu, ol, ul{padding:0;list-style:none;list-style-image:none}main{display:block}a{color:inherit;text-decoration:none}a, button, input{-webkit-tap-highlight-color:transparent}img, svg{vertical-align:middle}button{background:transparent;overflow:visible}button, input, optgroup, select, textarea{margin:0}:root{--reach-tabs:1;--reach-menu-button:1}#speechify-root{font-family:Sohne, sans-serif}div[data-popper-reference-hidden="true"]{visibility:hidden;pointer-events:none} /*XCode style (c) Angel Garcia <angelgarcia.mail@gmail.com>*/.hljs {background: #fff;color: black; }/* Gray DOCTYPE selectors like WebKit */ .xml .hljs-meta {color: #c0c0c0; }.hljs-comment, .hljs-quote {color: #007400; }.hljs-tag, .hljs-attribute, .hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-name {color: #aa0d91; }.hljs-variable, .hljs-template-variable {color: #3F6E74; }.hljs-code, .hljs-string, .hljs-meta .hljs-string {color: #c41a16; }.hljs-regexp, .hljs-link {color: #0E0EFF; }.hljs-title, .hljs-symbol, .hljs-bullet, .hljs-number {color: #1c00cf; }.hljs-section, .hljs-meta {color: #643820; }.hljs-title.class_, .hljs-class .hljs-title, .hljs-type, .hljs-built_in, .hljs-params {color: #5c2699; }.hljs-attr {color: #836C28; }.hljs-subst {color: #000; }.hljs-formula {background-color: #eee;font-style: italic; }.hljs-addition {background-color: #baeeba; }.hljs-deletion {background-color: #ffc8bd; }.hljs-selector-id, .hljs-selector-class {color: #9b703f; }.hljs-doctag, .hljs-strong {font-weight: bold; }.hljs-emphasis {font-style: italic; } </style> <style type="text/css" data-fela-rehydration="493" data-fela-type="RULE">.a{font-family:medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif}.b{font-weight:400}.c{background-color:rgba(255, 255, 255, 1)}.l{display:block}.m{position:sticky}.n{top:0}.o{z-index:500}.p{padding:0 24px}.q{align-items:center}.r{border-bottom:solid 1px rgba(242, 242, 242, 1)}.y{height:41px}.z{line-height:20px}.ab{display:flex}.ac{height:57px}.ad{flex:1 0 auto}.ae{color:inherit}.af{fill:inherit}.ag{font-size:inherit}.ah{border:inherit}.ai{font-family:inherit}.aj{letter-spacing:inherit}.ak{font-weight:inherit}.al{padding:0}.am{margin:0}.aq:disabled{cursor:default}.ar:disabled{color:rgba(117, 117, 117, 1)}.as:disabled{fill:rgba(117, 117, 117, 1)}.at{height:25px}.au{fill:rgba(41, 41, 41, 1)}.av{margin-left:16px}.aw{border:none}.ax{border-radius:20px}.ay{width:240px}.az{background:rgba(250, 250, 250, 1)}.ba path{fill:rgba(117, 117, 117, 1)}.bc{outline:none}.bd{font-family:sohne, "Helvetica Neue", Helvetica, Arial, sans-serif}.be{font-size:14px}.bf{width:100%}.bg{padding:10px 20px 10px 0}.bh{background-color:transparent}.bi{color:rgba(41, 41, 41, 1)}.bj::placeholder{color:rgba(117, 117, 117, 1)}.bk{display:inline-block}.bl{margin-left:12px}.bm{margin-right:12px}.bn{border-radius:4px}.bo{margin-left:24px}.bp{height:24px}.bv{background-color:rgba(250, 250, 250, 1)}.bw{border-radius:50%}.bx{height:32px}.by{width:32px}.bz{margin:auto}.ca{max-width:1336px}.cb{flex-direction:row}.cc{justify-content:space-evenly}.cj{flex:1 1 auto}.ck{height:100vh}.cl{justify-content:center}.cm{padding-right:24px}.de{box-sizing:border-box}.df{border-left:1px solid rgba(242, 242, 242, 1)}.dg{min-height:100vh}.dh{height:100%}.di{position:relative}.dj{margin-left:8px}.dk{color:rgba(117, 117, 117, 1)}.dl{font-size:13px}.eb{color:rgba(255, 255, 255, 1)}.ec{fill:rgba(255, 255, 255, 1)}.ed{background:rgba(84, 132, 237, 1)}.ee{border-color:rgba(84, 132, 237, 1)}.eh:disabled{cursor:inherit !important}.ei:disabled{opacity:0.3}.ej:disabled:hover{background:rgba(84, 132, 237, 1)}.ek:disabled:hover{border-color:rgba(84, 132, 237, 1)}.el{border-radius:99em}.em{border-width:1px}.eo{border-style:solid}.ep{text-decoration:none}.es{margin-right:32px}.et{fill:rgba(117, 117, 117, 1)}.ew{background:transparent}.ex{cursor:pointer}.ey svg{margin-left:4px}.ez svg{fill:rgba(117, 117, 117, 1)}.fb{box-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.05)}.fc{position:absolute}.fd{background-color:rgba(242, 242, 242, 1)}.fe{border-bottom:1px solid rgba(230, 230, 230, 1)}.ff{min-width:0}.fg{margin:0 24px}.fk{height:56px}.fl{margin-right:16px}.fm{margin-right:3px}.fn{flex:0 0 auto}.fo{overflow:hidden}.fp{max-height:20px}.fq{text-overflow:ellipsis}.fr{display:-webkit-box}.fs{-webkit-line-clamp:1}.ft{-webkit-box-orient:vertical}.fu{word-break:break-all}.gg{margin-left:auto}.gh{margin-right:auto}.gi{max-width:728px}.gt{align-items:flex-start}.gu{justify-content:space-between}.gv{height:48px}.gw{width:48px}.gx{font-size:16px}.gy{line-height:24px}.gz{margin-bottom:4px}.ha{padding-left:12px}.he{padding:0px 8px 1px}.hf{flex-wrap:wrap}.hg{padding:0 8px}.hk{padding-right:4px}.hl{padding:8px 2px}.hm path{fill:rgba(168, 168, 168, 1)}.ho{margin:0 16px 0 28px}.hp path{fill:rgba(41, 41, 41, 1)}.hs svg path{fill:rgba(117, 117, 117, 1)}.ht{padding-top:24px}.hu{border:1px solid rgba(230, 230, 230, 1)}.hv{padding:6px 15px 6px 10px}.hx svg{margin-right:8px}.hy{padding-right:12px}.hz{background:rgba(255, 255, 255, 1)}.ia{box-shadow:0 1px 4px rgba(230, 230, 230, 1)}.ib{max-height:100vh}.ic{overflow-y:auto}.id{left:0}.ie{top:calc(100vh + 100px)}.if{bottom:calc(100vh + 100px)}.ig{width:10px}.ih{pointer-events:none}.ii{word-break:break-word}.ij{word-wrap:break-word}.ik:after{display:block}.il:after{content:""}.im:after{clear:both}.in{line-height:1.23}.io{letter-spacing:0}.ip{font-style:normal}.iq{font-weight:700}.jl{margin-bottom:-0.27em}.jm{max-width:800px}.jq{clear:both}.js{cursor:zoom-in}.jt{z-index:auto}.jv{max-width:100%}.jw{height:auto}.jx{line-height:1.58}.jy{letter-spacing:-0.004em}.jz{font-family:source-serif-pro, Georgia, Cambria, "Times New Roman", Times, serif}.ku{margin-bottom:-0.46em}.kv{line-height:28px}.kw{letter-spacing:-0.003em}.la{list-style-type:disc}.lb{margin-left:30px}.lc{padding-left:0px}.ld{font-size:18px}.lj{line-height:1.31}.lk{letter-spacing:-0.022em}.ll{font-weight:600}.mg{margin-bottom:-0.37em}.ml{overflow-x:auto}.mm{font-family:source-code-pro, Menlo, Monaco, "Courier New", Courier, monospace}.mn{padding:20px}.mo{border-radius:0}.mp{background:rgba(242, 242, 242, 1)}.mq{line-height:1.18}.mr{margin-top:-0.09em}.ms{margin-bottom:-0.09em}.mt{white-space:pre-wrap}.mu{min-width:fit-content}.mv{margin-top:0.91em}.mw{font-style:italic}.mx{max-width:1906px}.my{box-shadow:inset 3px 0 0 0 rgba(41, 41, 41, 1)}.mz{padding-left:23px}.na{margin-left:-20px}.ne{text-decoration:underline}.nf{margin-bottom:26px}.ng{margin-top:6px}.nh{margin-top:8px}.ni{margin-right:8px}.nj{padding:8px 16px}.nk{border-radius:100px}.nl{transition:background 300ms ease}.nn{white-space:nowrap}.no{border-top:none}.nu{height:52px}.nv{max-height:52px}.nw{box-sizing:content-box}.nx{position:static}.ny{z-index:1}.oa{max-width:155px}.od{margin-right:5px}.og{-webkit-user-select:none}.oh{border:0}.ok{outline:0}.ol{user-select:none}.om> svg{pointer-events:none}.ov{cursor:progress}.oy{margin-top:0px}.oz{opacity:1}.pa{padding:4px 0}.pd{margin:0 20px}.pe{padding-bottom:4px}.pf{padding-top:32px}.pg{font-weight:500}.pr{padding:7px 16px 9px}.ps{padding-top:5px}.pt{padding-top:25px}.pu{padding-bottom:96px}.pv{padding-top:40px}.pw{text-align:center}.px{padding-bottom:80px}.py{padding:30px 0}.pz{margin-bottom:0}.qa{min-width:100vw}.qb{right:0}.qc{bottom:0}.qd{background-color:rgba(0, 0, 0, 1)}.qk{max-width:1192px}.qn:disabled{color:rgba(255, 255, 255, 0.6)}.qo:disabled{fill:rgba(255, 255, 255, 0.45)}.qp{height:22px}.qq{margin-top:20px}.qr{color:rgba(255, 255, 255, 0.95)}.qt{margin-right:20px}.qu{height:1px}.qv{background-color:rgba(255, 255, 255, 0.4)}.qw{margin:28px 0 20px}.qx{top:57px}.qy{min-height:calc(100vh - 57px)}.qz{flex-direction:column}.ra{padding-bottom:0px}.rb{border-bottom:none}.rc{margin-top:40px}.rd{height:88px}.re{width:88px}.rf{margin-top:16px}.rg{margin-top:4px}.rh{margin-top:12px}.ri{margin-bottom:40px}.rj{margin-top:24px}.rk{width:auto}.rl{stroke:rgba(242, 242, 242, 1)}.rm{height:36px}.rn{width:36px}.ro{color:rgba(242, 242, 242, 1)}.rp{fill:rgba(242, 242, 242, 1)}.rq{border-color:rgba(242, 242, 242, 1)}.rw{padding:24px 0}.rx{margin-right:6px}.ry{font-size:11px}.rz{line-height:16px}.an:hover{cursor:pointer}.ao:hover{color:rgba(25, 25, 25, 1)}.ap:hover{fill:rgba(25, 25, 25, 1)}.ef:hover{background:rgba(76, 114, 196, 1)}.eg:hover{border-color:rgba(76, 114, 196, 1)}.eu:hover{color:rgba(41, 41, 41, 1)}.ev:hover{fill:rgba(41, 41, 41, 1)}.fa:hover svg{fill:rgba(41, 41, 41, 1)}.hn:hover path{fill:rgba(8, 8, 8, 1)}.hq:hover svg path{fill:rgba(8, 8, 8, 1)}.hw:hover{border-color:rgba(204, 204, 204, 1)}.nm:hover{background-color:rgba(230, 230, 230, 1)}.oj:hover{fill:rgba(8, 8, 8, 1)}.pb:hover p{color:rgba(8, 8, 8, 1)}.ql:hover{color:rgba(255, 255, 255, 1)}.qm:hover{fill:rgba(255, 255, 255, 0.9)}.qs:hover{text-decoration:underline}.rr:hover{background:rgba(242, 242, 242, 1)}.rs:hover{border-color:rgba(242, 242, 242, 1)}.rt:hover{cursor:wait}.ru:hover{color:rgba(242, 242, 242, 1)}.rv:hover{fill:rgba(242, 242, 242, 1)}.bb:focus-within path{fill:rgba(41, 41, 41, 1)}.hr:focus svg path{fill:rgba(8, 8, 8, 1)}.ju:focus{transform:scale(1.01)}.oi:focus{fill:rgba(8, 8, 8, 1)}.pc:focus path{fill:rgba(8, 8, 8, 1)}.on:active{border-style:none}</style> <style type="text/css" data-fela-rehydration="493" data-fela-type="RULE" media="all and (min-width: 1080px)">.d{display:none}.bu{width:64px}.cd{max-width:728px}.ce{min-width:728px}.da{padding-left:clamp(24px, 24px + 100vw - 1080px, 40px)}.db{display:block}.dc{min-width:368px}.dd{max-width:368px}.du{font-size:14px}.dv{line-height:20px}.ea{padding:4px 12px 6px}.er{display:flex}.fj{max-width:680px}.ga{margin-bottom:68px}.gf{padding:0 16px}.gr{margin-bottom:32px}.gs{margin-top:56px}.hj{display:inline-flex}.jh{font-size:32px}.ji{margin-top:0.6em}.jj{line-height:40px}.jk{letter-spacing:-0.016em}.jp{margin-top:40px}.kq{font-size:20px}.kr{margin-top:2em}.ks{line-height:32px}.kt{letter-spacing:-0.003em}.kz{margin-top:2.14em}.li{margin-top:1.14em}.mc{font-size:22px}.md{margin-top:3.14em}.me{line-height:28px}.mf{letter-spacing:0}.nd{font-size:21px}.nt{margin-bottom:26px}.ou{margin-top:0px}.ox{display:inline-block}.pp{line-height:24px}.pq{max-height:24px}.qj{margin:0 64px}</style> <style type="text/css" data-fela-rehydration="493" data-fela-type="RULE" media="all and (max-width: 1079.98px)">.e{display:none}.ot{margin-top:0px}.ow{display:inline-block}</style> <style type="text/css" data-fela-rehydration="493" data-fela-type="RULE" media="all and (max-width: 903.98px)">.f{display:none}.oc{display:inline-block}.os{margin-top:0px}</style> <style type="text/css" data-fela-rehydration="493" data-fela-type="RULE" media="all and (max-width: 727.98px)">.g{display:none}.ob{display:inline-block}.oq{margin-top:0px}.or{margin-right:0px}.qe{padding:24px 0}</style> <style type="text/css" data-fela-rehydration="493" data-fela-type="RULE" media="all and (max-width: 551.98px)">.h{display:none}.s{display:flex}.t{justify-content:space-between}.bq{width:24px}.ci{min-width:0}.cn{padding-left:24px}.co{min-width:352px}.cp{max-width:352px}.dm{font-size:13px}.dn{line-height:20px}.dw{padding:0px 8px 1px}.fw{margin-bottom:52px}.gb{padding:0 8px}.gj{margin-bottom:24px}.gk{margin-top:32px}.hb{display:inline-block}.ir{font-size:32px}.is{margin-top:0.64em}.it{line-height:40px}.iu{letter-spacing:-0.016em}.ka{font-size:18px}.kb{margin-top:1.56em}.kc{line-height:28px}.kd{letter-spacing:-0.003em}.le{margin-top:1.34em}.lm{font-size:20px}.ln{margin-top:1.9em}.lo{line-height:24px}.lp{letter-spacing:0}.mh{margin-top:40px}.np{margin-bottom:10px}.oe{margin-left:0px}.oo{margin-top:0px}.op{margin-right:0px}.ph{font-size:16px}.pi{max-height:20px}.qf{margin:0 24px}</style> <style type="text/css" data-fela-rehydration="493" data-fela-type="RULE" media="all and (min-width: 904px) and (max-width: 1079.98px)">.i{display:none}.bt{width:64px}.cf{min-width:0}.cw{padding-left:24px}.cx{display:block}.cy{min-width:352px}.cz{max-width:352px}.ds{font-size:14px}.dt{line-height:20px}.dz{padding:4px 12px 6px}.eq{display:flex}.fi{max-width:680px}.fz{margin-bottom:68px}.ge{padding:0 16px}.gp{margin-bottom:24px}.gq{margin-top:32px}.hi{display:inline-flex}.jd{font-size:32px}.je{margin-top:0.6em}.jf{line-height:40px}.jg{letter-spacing:-0.016em}.jo{margin-top:40px}.km{font-size:20px}.kn{margin-top:2em}.ko{line-height:32px}.kp{letter-spacing:-0.003em}.ky{margin-top:2.14em}.lh{margin-top:1.14em}.ly{font-size:22px}.lz{margin-top:3.14em}.ma{line-height:28px}.mb{letter-spacing:0}.mk{margin-top:56px}.nc{font-size:21px}.ns{margin-bottom:26px}.pn{line-height:24px}.po{max-height:24px}.qi{margin:0 64px}</style> <style type="text/css" data-fela-rehydration="493" data-fela-type="RULE" media="all and (min-width: 728px) and (max-width: 903.98px)">.j{display:none}.w{display:flex}.x{justify-content:flex-end}.bs{width:64px}.cg{min-width:0}.ct{padding-left:24px}.cu{min-width:352px}.cv{max-width:352px}.dq{font-size:13px}.dr{line-height:20px}.dy{padding:0px 8px 1px}.fh{max-width:680px}.fy{margin-bottom:68px}.gd{padding:0 16px}.gn{margin-bottom:24px}.go{margin-top:32px}.hd{display:inline-block}.hh{display:inline-flex}.iz{font-size:32px}.ja{margin-top:0.6em}.jb{line-height:40px}.jc{letter-spacing:-0.016em}.jn{margin-top:40px}.ki{font-size:20px}.kj{margin-top:2em}.kk{line-height:32px}.kl{letter-spacing:-0.003em}.kx{margin-top:2.14em}.lg{margin-top:1.14em}.lu{font-size:22px}.lv{margin-top:3.14em}.lw{line-height:28px}.lx{letter-spacing:0}.mj{margin-top:56px}.nb{font-size:21px}.nr{margin-bottom:26px}.pl{line-height:24px}.pm{max-height:24px}.qh{margin:0 48px}</style> <style type="text/css" data-fela-rehydration="493" data-fela-type="RULE" media="all and (min-width: 552px) and (max-width: 727.98px)">.k{display:none}.u{display:flex}.v{justify-content:space-between}.br{width:24px}.ch{min-width:0}.cq{padding-left:24px}.cr{min-width:352px}.cs{max-width:352px}.do{font-size:13px}.dp{line-height:20px}.dx{padding:0px 8px 1px}.fx{margin-bottom:52px}.gc{padding:0 8px}.gl{margin-bottom:24px}.gm{margin-top:32px}.hc{display:inline-block}.iv{font-size:32px}.iw{margin-top:0.64em}.ix{line-height:40px}.iy{letter-spacing:-0.016em}.ke{font-size:18px}.kf{margin-top:1.56em}.kg{line-height:28px}.kh{letter-spacing:-0.003em}.lf{margin-top:1.34em}.lq{font-size:20px}.lr{margin-top:1.9em}.ls{line-height:24px}.lt{letter-spacing:0}.mi{margin-top:40px}.nq{margin-bottom:10px}.of{margin-left:0px}.pj{font-size:16px}.pk{max-height:20px}.qg{margin:0 24px}</style> <style type="text/css" data-fela-rehydration="493" data-fela-type="RULE" media="print">.nz{display:none}</style> <style type="text/css" data-fela-rehydration="493" data-fela-type="RULE" media="(orientation: landscape) and (max-width: 903.98px)">.fv{max-height:none}</style> <style type="text/css" data-fela-rehydration="493" data-fela-type="RULE" media="(prefers-reduced-motion: no-preference)">.jr{transition:transform 300ms cubic-bezier(0.2, 0, 0.2, 1)}</style> </head> <body> <div id="root"> <div class="a b c"> <div class="d e f g h i j k"></div> <div class="l c"> <div class="l m n o c"> <div class="p q r s t u v w x i d y z"> <a class="dk af dl bd aj b al am an ao ap aq ar as s u j i d q dh z" href="https://rsci.app.link/?%24canonical_url=https%3A%2F%2Fmedium.com%2Fp%2F6f7bc9165443&%7Efeature=LoOpenInAppButton&%7Echannel=ShowPostUnderCollection&source=---two_column_layout_nav----------------------------------" rel="noopener follow">在应用中打开<svg width="10" height="10" viewbox="0 0 10 10" fill="none" class="dj"> <path d="M.98 8.48a.37.37 0 1 0 .54.54l-.54-.54zm7.77-7.23h.38c0-.2-.17-.38-.38-.38v.38zM8.37 6.5a.37.37 0 1 0 .76 0h-.76zM3.5.87a.37.37 0 1 0 0 .76V.88zM1.52 9.03l7.5-7.5-.54-.54-7.5 7.5.54.54zm6.86-7.77V6.5h.74V1.25h-.74zm-4.88.38h5.25V.88H3.5v.74z" fill="currentColor"></path> </svg></a> <div class="ab q"> <p class="bd b dm dn do dp dq dr ds dt du dv dk"><span><a class="bd b dm dn dw do dp dx dq dr dy ds dt dz du dv ea eb ec ed ee ef eg an eh ei ej ek el em eo de bk ep" href="https://medium.com/m/signin?operation=register&redirect=https%3A%2F%2Fblog.angulartraining.com%2Fcomponent-architecture-with-angular-6f7bc9165443&source=post_page---two_column_layout_nav-----------------------global_nav-----------" rel="noopener follow">报名</a></span></p> <div class="av l"> <p class="bd b dm dn do dp dq dr ds dt du dv dk"><span><a class="ae af ag ah ai aj ak al am an ao ap aq ar as" href="https://medium.com/m/signin?operation=login&redirect=https%3A%2F%2Fblog.angulartraining.com%2Fcomponent-architecture-with-angular-6f7bc9165443&source=post_page---two_column_layout_nav-----------------------global_nav-----------" rel="noopener follow">登录</a></span></p> </div> </div> </div> <div class="p q r ab ac"> <div class="ab q ad"> <a class="ae af ag ah ai aj ak al am an ao ap aq ar as ab" aria-label="Homepage" href="https://medium.com/?source=---two_column_layout_nav----------------------------------" rel="noopener follow"> <svg viewbox="0 0 1043.63 592.71" class="at au"> <g data-name="Layer 2"> <g data-name="Layer 1"> <path d="M588.67 296.36c0 163.67-131.78 296.35-294.33 296.35S0 460 0 296.36 131.78 0 294.34 0s294.33 132.69 294.33 296.36M911.56 296.36c0 154.06-65.89 279-147.17 279s-147.17-124.94-147.17-279 65.88-279 147.16-279 147.17 124.9 147.17 279M1043.63 296.36c0 138-23.17 249.94-51.76 249.94s-51.75-111.91-51.75-249.94 23.17-249.94 51.75-249.94 51.76 111.9 51.76 249.94"></path> </g> </g> </svg></a> <div class="av h"> <div class="ab aw ax ay az q ba bb"> <div class="bk" aria-hidden="false" aria-describedby="searchResults" aria-labelledby="searchResults"></div> <div class="bl bm ab"> <svg width="24" height="24" viewbox="0 0 24 24" fill="none"> <path fill-rule="evenodd" clip-rule="evenodd" d="M4.1 11.06a6.95 6.95 0 1 1 13.9 0 6.95 6.95 0 0 1-13.9 0zm6.94-8.05a8.05 8.05 0 1 0 5.13 14.26l3.75 3.75a.56.56 0 1 0 .8-.79l-3.74-3.73A8.05 8.05 0 0 0 11.04 3v.01z" fill="currentColor"></path> </svg> </div> <input role="combobox" aria-controls="searchResults" aria-expanded="false" aria-label="search" tabindex="0" class="aw bc bd be z bf bg bh bi bj" placeholder="Search Medium" value=""> </div> </div> </div> <div class="h k w eq er"> <div class="es ab"> <span><a class="ae af ag ah ai aj ak al am an ao ap aq ar as" href="https://medium.com/m/signin?operation=register&redirect=https%3A%2F%2Fmedium.com%2Fnew-story&source=---two_column_layout_nav-----------------------new_post_sidenav-----------" rel="noopener follow"> <div class="bd b be z dk di et ab q eu ev"> <svg width="24" height="24" viewbox="0 0 24 24" fill="none" aria-label="Write"> <path d="M14 4a.5.5 0 0 0 0-1v1zm7 6a.5.5 0 0 0-1 0h1zm-7-7H4v1h10V3zM3 4v16h1V4H3zm1 17h16v-1H4v1zm17-1V10h-1v10h1zm-1 1a1 1 0 0 0 1-1h-1v1zM3 20a1 1 0 0 0 1 1v-1H3zM4 3a1 1 0 0 0-1 1h1V3z" fill="currentColor"></path> <path d="M17.5 4.5l-8.46 8.46a.25.25 0 0 0-.06.1l-.82 2.47c-.07.2.12.38.31.31l2.47-.82a.25.25 0 0 0 .1-.06L19.5 6.5m-2-2l2.32-2.32c.1-.1.26-.1.36 0l1.64 1.64c.1.1.1.26 0 .36L19.5 6.5m-2-2l2 2" stroke="currentColor"></path> </svg> <div class="dj l"> 写</ div >< / div ></a></span> </div> </div> <div class="k j i d"> <div class="es ab"> <a class="ae af ag ah ai aj ak al am an ao ap aq ar as" href="https://medium.com/search?source=---two_column_layout_nav----------------------------------" rel="noopener follow"> <div class="bd b be z dk di et ab q eu ev"> <svg width="24" height="24" viewbox="0 0 24 24" fill="none" aria-label="Search"> <path fill-rule="evenodd" clip-rule="evenodd" d="M4.1 11.06a6.95 6.95 0 1 1 13.9 0 6.95 6.95 0 0 1-13.9 0zm6.94-8.05a8.05 8.05 0 1 0 5.13 14.26l3.75 3.75a.56.56 0 1 0 .8-.79l-3.74-3.73A8.05 8.05 0 0 0 11.04 3v.01z" fill="currentColor"></path> </svg> </div></a> </div> </div> <div class="es h k j"> <div class="ab q"> <p class="bd b dm dn do dp dq dr ds dt du dv dk"><span><a class="bd b dm dn dw do dp dx dq dr dy ds dt dz du dv ea eb ec ed ee ef eg an eh ei ej ek el em eo de bk ep" href="https://medium.com/m/signin?operation=register&redirect=https%3A%2F%2Fblog.angulartraining.com%2Fcomponent-architecture-with-angular-6f7bc9165443&source=post_page---two_column_layout_nav-----------------------global_nav-----------" rel="noopener follow">报名</a></span></p> <div class="av l"> <p class="bd b dm dn do dp dq dr ds dt du dv dk"><span><a class="ae af ag ah ai aj ak al am an ao ap aq ar as" href="https://medium.com/m/signin?operation=login&redirect=https%3A%2F%2Fblog.angulartraining.com%2Fcomponent-architecture-with-angular-6f7bc9165443&source=post_page---two_column_layout_nav-----------------------global_nav-----------" rel="noopener follow">登录</a></span></p> </div> </div> </div> <div class="l" aria-hidden="false"> <button class="aw ew al ab q ex ey ez fa" aria-label="user options menu"> <div class="l di"> <img alt="" class="l de bw bx by fd" src="https://miro.medium.com/fit/c/64/64/1*dmbNkD5D-u45r44go_cf0g.png" width="32" height="32" loading="lazy" role="presentation"> <div class="fb bw l bx by fc n"></div> </div> <svg width="12px" height="12px" viewbox="0 0 15 15"> <path d="M3.85 5.15a.5.5 0 0 0-.7.7l4.35 4.36 4.35-4.36a.5.5 0 1 0-.7-.7L7.5 8.79 3.85 5.15z" fill-rule="evenodd"></path> </svg></button> </div> </div> </div> <div class="bz ca l"> <div class="ab cb cc"> <main class="cd ce cf cg ch ci l cj"> <div class="l"> <div class="fe l"> <div class="ab cl"> <div class="ff bf fg fh fi fj"> <div class="fk ab q"> <div class="fl l"> <a class="ae af ag ah ai aj ak al am an ao ap aq ar as" href="//www.kaltexworkwear.com/blog/?source=post_page-----6f7bc9165443--------------------------------" rel="noopener follow"> <div class="l di"> <img alt="角训练" class="l de bw bx by fd" src="https://miro.medium.com/fit/c/64/64/1*jO76MZ9zHMWGo183mFRTfw.png" width="32" height="32" loading="lazy"> <div class="fb bw l bx by fc n"></div> </div></a> </div> <div class="fm l fn"> <div class="bd b be z dk"> 发表在</ div >< / div ><a class="ae af ag ah ai aj ak al am an ao ap aq ar as" href="//www.kaltexworkwear.com/blog/?source=post_page-----6f7bc9165443--------------------------------" rel="noopener follow"><p class="bd b be z fo fp fq fr fs ft fu fv bi">角训练</ p ></a> </div> </div> </div> </div> <div class="fw fx fy fz ga l"> <div class="ab cl"> <div class="ff bf fg fh fi fj"> <article> <div class="l"> <div class="gb gc gd ge gf gg gh bf gi de l"></div> <div class="l"> <header class="pw-post-byline-header gj gk gl gm gn go gp gq gr gs l"> <div class="ab gt gu"> <div class="ab"> <div class="fl l"> <a class="ae af ag ah ai aj ak al am an ao ap aq ar as" href="https://angulartraining.medium.com/?source=post_page-----6f7bc9165443--------------------------------" rel="noopener follow"> <div class="l di"> <img alt="betway必威滚球" class="l de bw gv gw fd" src="https://miro.medium.com/fit/c/96/96/2*eKfxHLZ5a2vEesDLB-UAew.png" width="48" height="48" loading="lazy"> <div class="fb bw l gv gw fc n"></div> </div></a> </div> <div class="l"> <div class="pw-author bd b gx gy bi"> <div class="gz ab q cb"> <div> <div class="bk" aria-hidden="false"> <a class="ae af ag ah ai aj ak al am an ao ap aq ar as" href="https://angulartraining.medium.com/?source=post_page-----6f7bc9165443--------------------------------" rel="noopener follow">betway必威滚球</a> </div> </div> <div class="ha hb hc hd i d"> <span><a class="bd b dl z eb he ec ed ee ef eg an eh ei ej ek el em eo de bk ep" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fsubscribe%2Fuser%2F140cb12ffa1f&operation=register&redirect=https%3A%2F%2Fblog.angulartraining.com%2Fcomponent-architecture-with-angular-6f7bc9165443&user=Alain+Chautard&userId=140cb12ffa1f&source=post_page-140cb12ffa1f----6f7bc9165443---------------------follow_byline-----------" rel="noopener follow">遵循</a></span> </div> </div> </div> <div class="ab q hf"> <p class="pw-published-date bd b be z dk"><span>2018年7月9日</span></p> <div class="hg bk" aria-hidden="true"> <span class="l" aria-hidden="true"><span class="bd b be z dk">·</span></span> </div> <div class="pw-reading-time bd b be z dk"> 3分钟读取</ div >< / div >< / div >< / div ><div class="ab q"> <div class="h k hh hi hj"> <div class="hk l fn"> <div> <div class="bk" aria-hidden="false"> <button class="ae af ag ah ai aj ak al am an ao ap aq ar as" aria-label="Share on twitter"><span class="bk hl hm hn"> <svg width="24" height="24" viewbox="0 0 24 24" fill="none"> <path d="M20 5.34c-.67.41-1.4.7-2.18.87a3.45 3.45 0 0 0-5.02-.1 3.49 3.49 0 0 0-1.02 2.47c0 .28.03.54.07.8a9.91 9.91 0 0 1-7.17-3.66 3.9 3.9 0 0 0-.5 1.74 3.6 3.6 0 0 0 1.56 2.92 3.36 3.36 0 0 1-1.55-.44V10c0 1.67 1.2 3.08 2.8 3.42-.3.06-.6.1-.94.12l-.62-.06a3.5 3.5 0 0 0 3.24 2.43 7.34 7.34 0 0 1-4.36 1.49l-.81-.05a9.96 9.96 0 0 0 5.36 1.56c6.4 0 9.91-5.32 9.9-9.9v-.5c.69-.49 1.28-1.1 1.74-1.81-.63.3-1.3.48-2 .56A3.33 3.33 0 0 0 20 5.33" fill="#A8A8A8"></path> </svg></span></button> </div> </div> </div> <div class="hk l fn"> <div> <div class="bk" aria-hidden="false"> <button class="ae af ag ah ai aj ak al am an ao ap aq ar as" aria-label="Share on facebook"><span class="bk hl hm hn"> <svg width="24" height="24" viewbox="0 0 24 24" fill="none"> <path d="M19.75 12.04c0-4.3-3.47-7.79-7.75-7.79a7.77 7.77 0 0 0-5.9 12.84 7.77 7.77 0 0 0 4.69 2.63v-5.49h-1.9v-2.2h1.9v-1.62c0-1.88 1.14-2.9 2.8-2.9.8 0 1.49.06 1.69.08v1.97h-1.15c-.91 0-1.1.43-1.1 1.07v1.4h2.17l-.28 2.2h-1.88v5.52a7.77 7.77 0 0 0 6.7-7.71" fill="#A8A8A8"></path> </svg></span></button> </div> </div> </div> <div class="hk l fn"> <div> <div class="bk" aria-hidden="false"> <button class="ae af ag ah ai aj ak al am an ao ap aq ar as" aria-label="Share on linkedin"><span class="bk hl hm hn"> <svg width="24" height="24" viewbox="0 0 24 24" fill="none"> <path d="M19.75 5.39v13.22a1.14 1.14 0 0 1-1.14 1.14H5.39a1.14 1.14 0 0 1-1.14-1.14V5.39a1.14 1.14 0 0 1 1.14-1.14h13.22a1.14 1.14 0 0 1 1.14 1.14zM8.81 10.18H6.53v7.3H8.8v-7.3zM9 7.67a1.31 1.31 0 0 0-1.3-1.32h-.04a1.32 1.32 0 0 0 0 2.64A1.31 1.31 0 0 0 9 7.71v-.04zm8.46 5.37c0-2.2-1.4-3.05-2.78-3.05a2.6 2.6 0 0 0-2.3 1.18h-.07v-1h-2.14v7.3h2.28V13.6a1.51 1.51 0 0 1 1.36-1.63h.09c.72 0 1.26.45 1.26 1.6v3.91h2.28l.02-4.43z" fill="#A8A8A8"></path> </svg></span></button> </div> </div> </div> <div class="l fn"> <div> <div class="bk" aria-hidden="false"> <button class="ae af ag ah ai aj ak al am an ao ap aq ar as"><span class="bk hl hm hn"> <svg width="24" height="24" viewbox="0 0 24 24" fill="none"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.57 14.67c0-.57.13-1.11.38-1.6l.02-.02v-.02l.02-.02c0-.02 0-.02.02-.02.12-.26.3-.52.57-.8L7.78 9v-.02l.01-.02c.44-.41.91-.7 1.44-.85a4.87 4.87 0 0 0-1.19 2.36A5.04 5.04 0 0 0 8 11.6L6.04 13.6c-.19.19-.32.4-.38.65a2 2 0 0 0 0 .9c.08.2.2.4.38.57l1.29 1.31c.27.28.62.42 1.03.42.42 0 .78-.14 1.06-.42l1.23-1.25.79-.78 1.15-1.16c.08-.09.19-.22.28-.4.1-.2.15-.42.15-.67 0-.16-.02-.3-.06-.45l-.02-.02v-.02l-.07-.14s0-.03-.04-.06l-.06-.13-.02-.02c0-.02 0-.03-.02-.05a.6.6 0 0 0-.14-.16l-.48-.5c0-.04.02-.1.04-.15l.06-.12 1.17-1.14.09-.09.56.57c.02.04.08.1.16.18l.05.04.03.06.04.05.03.04.04.06.1.14.02.02c0 .02.01.03.03.04l.1.2v.02c.1.16.2.38.3.68a1 1 0 0 1 .04.25 3.2 3.2 0 0 1 .02 1.33 3.49 3.49 0 0 1-.95 1.87l-.66.67-.97.97-1.56 1.57a3.4 3.4 0 0 1-2.47 1.02c-.97 0-1.8-.34-2.49-1.03l-1.3-1.3a3.55 3.55 0 0 1-1-2.51v-.01h-.02v.02zm5.39-3.43c0-.19.02-.4.07-.63.13-.74.44-1.37.95-1.87l.66-.67.97-.98 1.56-1.56c.68-.69 1.5-1.03 2.47-1.03.97 0 1.8.34 2.48 1.02l1.3 1.32a3.48 3.48 0 0 1 1 2.48c0 .58-.11 1.11-.37 1.6l-.02.02v.02l-.02.04c-.14.27-.35.54-.6.8L16.23 15l-.01.02-.01.02c-.44.42-.92.7-1.43.83a4.55 4.55 0 0 0 1.23-3.52L18 10.38c.18-.21.3-.42.35-.65a2.03 2.03 0 0 0-.01-.9 1.96 1.96 0 0 0-.36-.58l-1.3-1.3a1.49 1.49 0 0 0-1.06-.42c-.42 0-.77.14-1.06.4l-1.2 1.27-.8.8-1.16 1.15c-.08.08-.18.21-.29.4a1.66 1.66 0 0 0-.08 1.12l.02.03v.02l.06.14s.01.03.05.06l.06.13.02.02.01.02.01.02c.05.08.1.13.14.16l.47.5c0 .04-.02.09-.04.15l-.06.12-1.15 1.15-.1.08-.56-.56a2.3 2.3 0 0 0-.18-.19c-.02-.01-.02-.03-.02-.04l-.02-.02a.37.37 0 0 1-.1-.12c-.03-.03-.05-.04-.05-.06l-.1-.15-.02-.02-.02-.04-.08-.17v-.02a5.1 5.1 0 0 1-.28-.69 1.03 1.03 0 0 1-.04-.26c-.06-.23-.1-.46-.1-.7v.01z" fill="#A8A8A8"></path> </svg></span></button> </div> </div> </div> <div class="ho ab q"> <span><a class="ae af ag ah ai aj ak al am an ao ap aq ar as" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2F6f7bc9165443&operation=register&redirect=https%3A%2F%2Fblog.angulartraining.com%2Fcomponent-architecture-with-angular-6f7bc9165443&source=--------------------------bookmark_header-----------" rel="noopener follow"><button aria-controls="addToCatalogBookmarkButton" aria-expanded="false" aria-label="Add to list bookmark button" class="ae et ag ah ai aj ak hl am ex hq hr hs"> <svg width="25" height="25" viewbox="0 0 25 25" fill="none" class="hp" aria-label="Add to list bookmark button"> <path d="M18 2.5a.5.5 0 0 1 1 0V5h2.5a.5.5 0 0 1 0 1H19v2.5a.5.5 0 1 1-1 0V6h-2.5a.5.5 0 0 1 0-1H18V2.5zM7 7a1 1 0 0 1 1-1h3.5a.5.5 0 0 0 0-1H8a2 2 0 0 0-2 2v14a.5.5 0 0 0 .8.4l5.7-4.4 5.7 4.4a.5.5 0 0 0 .8-.4v-8.5a.5.5 0 0 0-1 0v7.48l-5.2-4a.5.5 0 0 0-.6 0l-5.2 4V7z" fill="#292929"></path> </svg></button></a></span> </div> <div> <div class="bk" aria-hidden="false"></div> </div> </div> </div> </div> <div class="ht s u j i d"> <div class="fl l"> <span><a class="ae af ag ah ai aj ak al am an ao ap aq ar as" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2F6f7bc9165443&operation=register&redirect=https%3A%2F%2Fblog.angulartraining.com%2Fcomponent-architecture-with-angular-6f7bc9165443&source=--------------------------bookmark_header-----------" rel="noopener follow"><button aria-controls="addToCatalogBookmarkButton" aria-expanded="false" aria-label="Add to list bookmark button" class="ae et ag hu ai aj ak hv am ex el ab q hw hx hs"> <svg width="25" height="25" viewbox="0 0 25 25" fill="none" class="hp" aria-label="Add to list bookmark button"> <path d="M18 2.5a.5.5 0 0 1 1 0V5h2.5a.5.5 0 0 1 0 1H19v2.5a.5.5 0 1 1-1 0V6h-2.5a.5.5 0 0 1 0-1H18V2.5zM7 7a1 1 0 0 1 1-1h3.5a.5.5 0 0 0 0-1H8a2 2 0 0 0-2 2v14a.5.5 0 0 0 .8.4l5.7-4.4 5.7 4.4a.5.5 0 0 0 .8-.4v-8.5a.5.5 0 0 0-1 0v7.48l-5.2-4a.5.5 0 0 0-.6 0l-5.2 4V7z" fill="#292929"></path> </svg><p class="bd b be z dk">保存</ p ></button></a></span> </div> <div class="hy l fn"> <div> <div class="bk" aria-hidden="false"> <button class="ae af ag ah ai aj ak al am an ao ap aq ar as" aria-label="Share on twitter"><span class="bk hl hm hn"> <svg width="24" height="24" viewbox="0 0 24 24" fill="none"> <path d="M20 5.34c-.67.41-1.4.7-2.18.87a3.45 3.45 0 0 0-5.02-.1 3.49 3.49 0 0 0-1.02 2.47c0 .28.03.54.07.8a9.91 9.91 0 0 1-7.17-3.66 3.9 3.9 0 0 0-.5 1.74 3.6 3.6 0 0 0 1.56 2.92 3.36 3.36 0 0 1-1.55-.44V10c0 1.67 1.2 3.08 2.8 3.42-.3.06-.6.1-.94.12l-.62-.06a3.5 3.5 0 0 0 3.24 2.43 7.34 7.34 0 0 1-4.36 1.49l-.81-.05a9.96 9.96 0 0 0 5.36 1.56c6.4 0 9.91-5.32 9.9-9.9v-.5c.69-.49 1.28-1.1 1.74-1.81-.63.3-1.3.48-2 .56A3.33 3.33 0 0 0 20 5.33" fill="#A8A8A8"></path> </svg></span></button> </div> </div> </div> <div class="hy l fn"> <div> <div class="bk" aria-hidden="false"> <button class="ae af ag ah ai aj ak al am an ao ap aq ar as" aria-label="Share on facebook"><span class="bk hl hm hn"> <svg width="24" height="24" viewbox="0 0 24 24" fill="none"> <path d="M19.75 12.04c0-4.3-3.47-7.79-7.75-7.79a7.77 7.77 0 0 0-5.9 12.84 7.77 7.77 0 0 0 4.69 2.63v-5.49h-1.9v-2.2h1.9v-1.62c0-1.88 1.14-2.9 2.8-2.9.8 0 1.49.06 1.69.08v1.97h-1.15c-.91 0-1.1.43-1.1 1.07v1.4h2.17l-.28 2.2h-1.88v5.52a7.77 7.77 0 0 0 6.7-7.71" fill="#A8A8A8"></path> </svg></span></button> </div> </div> </div> <div class="hy l fn"> <div> <div class="bk" aria-hidden="false"> <button class="ae af ag ah ai aj ak al am an ao ap aq ar as" aria-label="Share on linkedin"><span class="bk hl hm hn"> <svg width="24" height="24" viewbox="0 0 24 24" fill="none"> <path d="M19.75 5.39v13.22a1.14 1.14 0 0 1-1.14 1.14H5.39a1.14 1.14 0 0 1-1.14-1.14V5.39a1.14 1.14 0 0 1 1.14-1.14h13.22a1.14 1.14 0 0 1 1.14 1.14zM8.81 10.18H6.53v7.3H8.8v-7.3zM9 7.67a1.31 1.31 0 0 0-1.3-1.32h-.04a1.32 1.32 0 0 0 0 2.64A1.31 1.31 0 0 0 9 7.71v-.04zm8.46 5.37c0-2.2-1.4-3.05-2.78-3.05a2.6 2.6 0 0 0-2.3 1.18h-.07v-1h-2.14v7.3h2.28V13.6a1.51 1.51 0 0 1 1.36-1.63h.09c.72 0 1.26.45 1.26 1.6v3.91h2.28l.02-4.43z" fill="#A8A8A8"></path> </svg></span></button> </div> </div> </div> <div class="l fn"> <div> <div class="bk" aria-hidden="false"> <button class="ae af ag ah ai aj ak al am an ao ap aq ar as"><span class="bk hl hm hn"> <svg width="24" height="24" viewbox="0 0 24 24" fill="none"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.57 14.67c0-.57.13-1.11.38-1.6l.02-.02v-.02l.02-.02c0-.02 0-.02.02-.02.12-.26.3-.52.57-.8L7.78 9v-.02l.01-.02c.44-.41.91-.7 1.44-.85a4.87 4.87 0 0 0-1.19 2.36A5.04 5.04 0 0 0 8 11.6L6.04 13.6c-.19.19-.32.4-.38.65a2 2 0 0 0 0 .9c.08.2.2.4.38.57l1.29 1.31c.27.28.62.42 1.03.42.42 0 .78-.14 1.06-.42l1.23-1.25.79-.78 1.15-1.16c.08-.09.19-.22.28-.4.1-.2.15-.42.15-.67 0-.16-.02-.3-.06-.45l-.02-.02v-.02l-.07-.14s0-.03-.04-.06l-.06-.13-.02-.02c0-.02 0-.03-.02-.05a.6.6 0 0 0-.14-.16l-.48-.5c0-.04.02-.1.04-.15l.06-.12 1.17-1.14.09-.09.56.57c.02.04.08.1.16.18l.05.04.03.06.04.05.03.04.04.06.1.14.02.02c0 .02.01.03.03.04l.1.2v.02c.1.16.2.38.3.68a1 1 0 0 1 .04.25 3.2 3.2 0 0 1 .02 1.33 3.49 3.49 0 0 1-.95 1.87l-.66.67-.97.97-1.56 1.57a3.4 3.4 0 0 1-2.47 1.02c-.97 0-1.8-.34-2.49-1.03l-1.3-1.3a3.55 3.55 0 0 1-1-2.51v-.01h-.02v.02zm5.39-3.43c0-.19.02-.4.07-.63.13-.74.44-1.37.95-1.87l.66-.67.97-.98 1.56-1.56c.68-.69 1.5-1.03 2.47-1.03.97 0 1.8.34 2.48 1.02l1.3 1.32a3.48 3.48 0 0 1 1 2.48c0 .58-.11 1.11-.37 1.6l-.02.02v.02l-.02.04c-.14.27-.35.54-.6.8L16.23 15l-.01.02-.01.02c-.44.42-.92.7-1.43.83a4.55 4.55 0 0 0 1.23-3.52L18 10.38c.18-.21.3-.42.35-.65a2.03 2.03 0 0 0-.01-.9 1.96 1.96 0 0 0-.36-.58l-1.3-1.3a1.49 1.49 0 0 0-1.06-.42c-.42 0-.77.14-1.06.4l-1.2 1.27-.8.8-1.16 1.15c-.08.08-.18.21-.29.4a1.66 1.66 0 0 0-.08 1.12l.02.03v.02l.06.14s.01.03.05.06l.06.13.02.02.01.02.01.02c.05.08.1.13.14.16l.47.5c0 .04-.02.09-.04.15l-.06.12-1.15 1.15-.1.08-.56-.56a2.3 2.3 0 0 0-.18-.19c-.02-.01-.02-.03-.02-.04l-.02-.02a.37.37 0 0 1-.1-.12c-.03-.03-.05-.04-.05-.06l-.1-.15-.02-.02-.02-.04-.08-.17v-.02a5.1 5.1 0 0 1-.28-.69 1.03 1.03 0 0 1-.04-.26c-.06-.23-.1-.46-.1-.7v.01z" fill="#A8A8A8"></path> </svg></span></button> </div> </div> </div> <div class="bl l"> <div> <div class="bk" aria-hidden="false"></div> </div> </div> </div> </header> <span class="l"></span> <section> <div> <div class="fc id ie if ig ih"></div> <div class="ii ij ik il im"> <div class=""> <h1 id="85ba" class="pw-post-title in io ip bd iq ir is it iu iv iw ix iy iz ja jb jc jd je jf jg jh ji jj jk jl bi">Angular的组件架构</h1> </div> <figure class="gk gm jn jo jp jq gg gh paragraph-image"> <div role="button" tabindex="0" class="jr js di jt bf ju"> <div class="gg gh jm"> <picture> <source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*M6urPRWOWW-QbxW9LWrwBg.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*M6urPRWOWW-QbxW9LWrwBg.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*M6urPRWOWW-QbxW9LWrwBg.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*M6urPRWOWW-QbxW9LWrwBg.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*M6urPRWOWW-QbxW9LWrwBg.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*M6urPRWOWW-QbxW9LWrwBg.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*M6urPRWOWW-QbxW9LWrwBg.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"> <source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*M6urPRWOWW-QbxW9LWrwBg.png 640w, https://miro.medium.com/v2/resize:fit:720/1*M6urPRWOWW-QbxW9LWrwBg.png 720w, https://miro.medium.com/v2/resize:fit:750/1*M6urPRWOWW-QbxW9LWrwBg.png 750w, https://miro.medium.com/v2/resize:fit:786/1*M6urPRWOWW-QbxW9LWrwBg.png 786w, https://miro.medium.com/v2/resize:fit:828/1*M6urPRWOWW-QbxW9LWrwBg.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*M6urPRWOWW-QbxW9LWrwBg.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*M6urPRWOWW-QbxW9LWrwBg.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"> <img alt="" class="bf jv jw c" width="700" height="263" loading="eager" role="presentation"> </picture> </div> </div> </figure> <p id="7e9c" class="pw-post-body-paragraph jx jy ip jz b ka kb kc kd ke kf kg kh ki kj kk kl km kn ko kp kq kr ks kt ku ii bi">角拥抱<strong class="jz iq">反应性编程</strong>，其中组件知道如何对用户点击或数据更新等外部事件做出反应。通过使用数据绑定，您可能已经熟悉了这一点:当组件的数据模型发生变化时，组件会立即刷新并呈现更新后的HTML。</ p ><p id="f3ca" class="pw-post-body-paragraph jx jy ip jz b ka kb kc kd ke kf kg kh ki kj kk kl km kn ko kp kq kr ks kt ku ii bi">考虑到这一点，我们如何才能有一个有利于代码重用的组件体系结构，并阐明数据如何在应用程序中流动?</ p ><p id="fd80" class="pw-post-body-paragraph jx jy ip jz b ka kb kc kd ke kf kg kh ki kj kk kl km kn ko kp kq kr ks kt ku ii bi">好消息是，有一个简单的模式可以遵循。它依赖于两种不同的组件:</ p ><ul class=""> <li id="1fbb" class="kv kw ip jz b ka kb ke kf ki kx km ky kq kz ku la lb lc ld bi"><strong class="jz iq">容器组件</strong>(或“智能”组件)知道如何获取数据并使用服务</li> <li id="1f59" class="kv kw ip jz b ka le ke lf ki lg km lh kq li ku la lb lc ld bi"><strong class="jz iq">表示组件</strong>(又称为“笨”或“懒”组件)，必须向它们提供数据</li> </ul> <h1 id="758f" class="lj lk ip bd ll lm ln lo lp lq lr ls lt lu lv lw lx ly lz ma mb mc md me mf mg bi">例子</h1> <pre class="mh mi mj mk gs ml mm mn mo aw mp bi"><span id="c62f" class="mq lk ip mm b gx mr ms l mt mu">@ component({…})<br><strong class="mm iq">出口类</strong>StoreViewComponent {</span><span id="0eca" class="mq lk ip mm b gx mv ms l mt mu"><strong class="mm iq">盘子</strong>:可见< LicensePlate [] >;<br><br><strong class="mm iq">构造函数</strong>（<strong class="mm iq">私人plateService</strong>: LicensePlateService,<br><strong class="mm iq">私人cartService</strong>: CartService) {<br><strong class="mm iq">这</strong>．<strong class="mm iq">盘子</strong>＝<strong class="mm iq">plateService</strong>.getAllPlates ();<br>｝</span><span id="e8cc" class="mq lk ip mm b gx mv ms l mt mu">addToCart(plate: LicensePlate) {<br><strong class="mm iq">这</strong>．<strong class="mm iq">cartService</strong>.addToCart(板)<br>.subscribe (() = ><em class="mw">警报</em>（<strong class="mm iq">的板</strong>${板。<strong class="mm iq">标题</strong>｝<strong class="mm iq">添加到购物车”</strong>));<br>｝<br>｝</span></pre> <p id="b1db" class="pw-post-body-paragraph jx jy ip jz b ka kb kc kd ke kf kg kh ki kj kk kl km kn ko kp kq kr ks kt ku ii bi">以上就是一个例子<strong class="jz iq">容器组件</strong>．该组件注入服务来加载一些数据。</ p ><p id="1ce0" class="pw-post-body-paragraph jx jy ip jz b ka kb kc kd ke kf kg kh ki kj kk kl km kn ko kp kq kr ks kt ku ii bi">它的模板实例化了两个不同的<strong class="jz iq">表象的组件</strong>：</ p ><pre class="mh mi mj mk gs ml mm mn mo aw mp bi"><span id="cf14" class="mq lk ip mm b gx mr ms l mt mu"><<strong class="mm iq">ngs-jumbotron</strong>title="欢迎光临我们的商店" description="浏览我们收集的车牌下面"></<strong class="mm iq">ngs-jumbotron</strong>></span><span id="a928" class="mq lk ip mm b gx mv ms l mt mu"><<strong class="mm iq">ngs-license-plate * ngFor =“让<em class="mw">板</em>盘子|</strong><em class="mw">异步”。</em><strong class="mm iq">(板)= "<em class="mw">板</em>”(onButtonClick) =“addToCart (<em class="mw">美元的事件</em>)" buttonText="添加到购物车»"</strong>></span><span id="4e45" class="mq lk ip mm b gx mv ms l mt mu"></<strong class="mm iq">ngs-license-plate</strong>></span></pre> <p id="d786" class="pw-post-body-paragraph jx jy ip jz b ka kb kc kd ke kf kg kh ki kj kk kl km kn ko kp kq kr ks kt ku ii bi"><strong class="jz iq">容器组件</strong>是“聪明的”，因为他们是使用服务获取数据并实现业务逻辑的人。它们实例化子组件并将数据传递给它们。这样的组件在整个应用程序中通常只有一个实例。它们很少被重用，因为它们与使用它们的上下文绑定在一起。</ p ><p id="1032" class="pw-post-body-paragraph jx jy ip jz b ka kb kc kd ke kf kg kh ki kj kk kl km kn ko kp kq kr ks kt ku ii bi">现在有一个例子<strong class="jz iq">表示组件</strong>：</ p ><pre class="mh mi mj mk gs ml mm mn mo aw mp bi"><span id="4f4d" class="mq lk ip mm b gx mr ms l mt mu">@ component({…})<br><strong class="mm iq">出口类</strong>LicensePlateComponent {</span><span id="5d99" class="mq lk ip mm b gx mv ms l mt mu">@Input ()<br><strong class="mm iq">板</strong>: LicensePlate;</span><span id="f17b" class="mq lk ip mm b gx mv ms l mt mu">@Input ()<br><strong class="mm iq">buttonText</strong>：<strong class="mm iq">字符串</strong>；</span><span id="0146" class="mq lk ip mm b gx mv ms l mt mu">@Output ()<br><strong class="mm iq">onButtonClick</strong>＝<strong class="mm iq">新</strong>EventEmitter < LicensePlate > ();<br>｝</span></pre> <p id="07c0" class="pw-post-body-paragraph jx jy ip jz b ka kb kc kd ke kf kg kh ki kj kk kl km kn ko kp kq kr ks kt ku ii bi"><strong class="jz iq">表示组件</strong>不知道任何服务。它们是纯粹的、简单的UI组件，只需要一些输入数据来呈现。按钮、选项卡、标题、表都是非常适合用作表示组件的。</ p ><p id="92db" class="pw-post-body-paragraph jx jy ip jz b ka kb kc kd ke kf kg kh ki kj kk kl km kn ko kp kq kr ks kt ku ii bi">现在该组件的HTML模板:</ p ><pre class="mh mi mj mk gs ml mm mn mo aw mp bi"><span id="79cd" class="mq lk ip mm b gx mr ms l mt mu">< h2 ><strong class="mm iq">{{plate.title}}</strong>< / h2 ><br>< img src = "<strong class="mm iq">{{plate.picture}}</strong>“阶级= " img-fluid " ><br>< p ><strong class="mm iq">{{plate.description}}</strong>< / p ><br>< div ><br>< h2 class = "就是说浮动" > $<strong class="mm iq">{{plate.price}}</strong>< / h2 ><br><按钮的作用= "按钮<strong class="mm iq">(点击)= " onButtonClick.emit(板)”</strong>><br><strong class="mm iq">{{buttonText}}</strong><br>< / >按钮<br>< / div ></span></pre> <p id="ddb5" class="pw-post-body-paragraph jx jy ip jz b ka kb kc kd ke kf kg kh ki kj kk kl km kn ko kp kq kr ks kt ku ii bi"><strong class="jz iq">表示组件</strong>实际上只是一个用数据填充的HTML模板。这些组件通常在应用程序中是可重用的。</ p ><p id="c19d" class="pw-post-body-paragraph jx jy ip jz b ka kb kc kd ke kf kg kh ki kj kk kl km kn ko kp kq kr ks kt ku ii bi">一个典型的组件架构来说明这一点:</ p ><figure class="mh mi mj mk gs jq gg gh paragraph-image"> <div role="button" tabindex="0" class="jr js di jt bf ju"> <div class="gg gh mx"> <picture> <source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*UNjhWu87sGABPfJXPceCwg.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*UNjhWu87sGABPfJXPceCwg.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*UNjhWu87sGABPfJXPceCwg.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*UNjhWu87sGABPfJXPceCwg.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*UNjhWu87sGABPfJXPceCwg.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*UNjhWu87sGABPfJXPceCwg.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*UNjhWu87sGABPfJXPceCwg.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"> <source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*UNjhWu87sGABPfJXPceCwg.png 640w, https://miro.medium.com/v2/resize:fit:720/1*UNjhWu87sGABPfJXPceCwg.png 720w, https://miro.medium.com/v2/resize:fit:750/1*UNjhWu87sGABPfJXPceCwg.png 750w, https://miro.medium.com/v2/resize:fit:786/1*UNjhWu87sGABPfJXPceCwg.png 786w, https://miro.medium.com/v2/resize:fit:828/1*UNjhWu87sGABPfJXPceCwg.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*UNjhWu87sGABPfJXPceCwg.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*UNjhWu87sGABPfJXPceCwg.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"> <img alt="" class="bf jv jw c" width="700" height="492" loading="lazy" role="presentation"> </picture> </div> </div> </figure> <p id="50f3" class="pw-post-body-paragraph jx jy ip jz b ka kb kc kd ke kf kg kh ki kj kk kl km kn ko kp kq kr ks kt ku ii bi">换句话说，容器组件从服务中获取数据，并将其传递给它们的子表示组件<strong class="jz iq">@Input ()</strong>或者数据绑定。</ p ><p id="c545" class="pw-post-body-paragraph jx jy ip jz b ka kb kc kd ke kf kg kh ki kj kk kl km kn ko kp kq kr ks kt ku ii bi">表示组件可以在重要事件发生时(例如单击)通知它们的父容器组件，并且该容器组件实现了相应的任务以被触发(例如服务调用)。</ p ><p id="cec2" class="pw-post-body-paragraph jx jy ip jz b ka kb kc kd ke kf kg kh ki kj kk kl km kn ko kp kq kr ks kt ku ii bi">这样，表示组件就完全独立于它们的运行时上下文，这使得它们可以重用。他们不知道在哪里使用模板，也不知道为什么要使用，他们唯一的目标就是正确地渲染模板。</ p ><blockquote class="my mz na"> <p id="ef0e" class="jx jy mw jz b ka kb kc kd ke kf kg kh nb kj kk kl nc kn ko kp nd kr ks kt ku ii bi">我叫<a class="ae ne" href="http://www.alainchautard.com" rel="noopener ugc nofollow" target="_blank">betway必威滚球</a>．我是公司的创始顾问和培训师<a class="ae ne" href="//www.kaltexworkwear.com/blog/" rel="noopener ugc nofollow" target="_blank">角训练</a>在那里我帮助开发人员学习并熟练使用Angular。</ p ><p id="b7e4" class="jx jy mw jz b ka kb kc kd ke kf kg kh nb kj kk kl nc kn ko kp nd kr ks kt ku ii bi">我还发表了"<a class="ae ne" href="https://www.packtpub.com/application-development/getting-started-angular-video" rel="noopener ugc nofollow" target="_blank">Angular入门</a>，如果你是Angular的新手，想要在几个小时内学习所有的基础知识，这是一个完美的视频课程。</ p ><p id="e573" class="jx jy mw jz b ka kb kc kd ke kf kg kh nb kj kk kl nc kn ko kp nd kr ks kt ku ii bi">如果你喜欢这篇文章，请推荐并分享!谢谢你的时间。</ p ></blockquote> </div> </div> </section> </div> </div> </article> </div> </div> </div> <div class="ab cl"> <div class="ff bf fg fh fi fj"> <div class="nf ng ab hf"> <div class="nh ab"> <a class="ni aw al ex" href="https://medium.com/tag/angular?source=post_page-----6f7bc9165443---------------angular-----------------" rel="noopener follow"> <div class="nj di fd nk nl nm bd b be z bi nn"> 角</ div ></a> </div> <div class="nh ab"> <a class="ni aw al ex" href="https://medium.com/tag/components?source=post_page-----6f7bc9165443---------------components-----------------" rel="noopener follow"> <div class="nj di fd nk nl nm bd b be z bi nn"> 组件</ div ></a> </div> <div class="nh ab"> <a class="ni aw al ex" href="https://medium.com/tag/architecture?source=post_page-----6f7bc9165443---------------architecture-----------------" rel="noopener follow"> <div class="nj di fd nk nl nm bd b be z bi nn"> 体系结构</ div ></a> </div> <div class="nh ab"> <a class="ni aw al ex" href="https://medium.com/tag/typescript?source=post_page-----6f7bc9165443---------------typescript-----------------" rel="noopener follow"> <div class="nj di fd nk nl nm bd b be z bi nn"> 打印稿</ div ></a> </div> <div class="nh ab"> <a class="ni aw al ex" href="https://medium.com/tag/architecture-components?source=post_page-----6f7bc9165443---------------architecture_components-----------------" rel="noopener follow"> <div class="nj di fd nk nl nm bd b be z bi nn"> 架构组件</ div ></a> </div> </div> </div> </div> <div class="l"></div> <footer class="no np nq nr ns nt nu nv nw ab q nx ny c"> <div class="l ad"> <div class="ab cl"> <div class="ff bf fg fh fi fj"> <div class="ab gu nz"> <div class="ab q cb"> <div class="oa l"> <span class="l hb ob oc e d"> <div class="ab q cb"> <div class="pw-multi-vote-icon di od oe of og"> <span><a class="ae af ag ah ai aj ak al am an ao ap aq ar as" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fangular-training%2F6f7bc9165443&operation=register&redirect=https%3A%2F%2Fblog.angulartraining.com%2Fcomponent-architecture-with-angular-6f7bc9165443&user=Alain+Chautard&userId=140cb12ffa1f&source=-----6f7bc9165443---------------------clap_footer-----------" rel="noopener follow"> <div class="oh ex et oi oj ok al ol om on og"> <svg width="24" height="24" viewbox="0 0 24 24" aria-label="clap"> <path fill-rule="evenodd" clip-rule="evenodd" d="M11.37.83L12 3.28l.63-2.45h-1.26zM13.92 3.95l1.52-2.1-1.18-.4-.34 2.5zM8.59 1.84l1.52 2.11-.34-2.5-1.18.4zM18.52 18.92a4.23 4.23 0 0 1-2.62 1.33l.41-.37c2.39-2.4 2.86-4.95 1.4-7.63l-.91-1.6-.8-1.67c-.25-.56-.19-.98.21-1.29a.7.7 0 0 1 .55-.13c.28.05.54.23.72.5l2.37 4.16c.97 1.62 1.14 4.23-1.33 6.7zm-11-.44l-4.15-4.15a.83.83 0 0 1 1.17-1.17l2.16 2.16a.37.37 0 0 0 .51-.52l-2.15-2.16L3.6 11.2a.83.83 0 0 1 1.17-1.17l3.43 3.44a.36.36 0 0 0 .52 0 .36.36 0 0 0 0-.52L5.29 9.51l-.97-.97a.83.83 0 0 1 0-1.16.84.84 0 0 1 1.17 0l.97.97 3.44 3.43a.36.36 0 0 0 .51 0 .37.37 0 0 0 0-.52L6.98 7.83a.82.82 0 0 1-.18-.9.82.82 0 0 1 .76-.51c.22 0 .43.09.58.24l5.8 5.79a.37.37 0 0 0 .58-.42L13.4 9.67c-.26-.56-.2-.98.2-1.29a.7.7 0 0 1 .55-.13c.28.05.55.23.73.5l2.2 3.86c1.3 2.38.87 4.59-1.29 6.75a4.65 4.65 0 0 1-4.19 1.37 7.73 7.73 0 0 1-4.07-2.25zm3.23-12.5l2.12 2.11c-.41.5-.47 1.17-.13 1.9l.22.46-3.52-3.53a.81.81 0 0 1-.1-.36c0-.23.09-.43.24-.59a.85.85 0 0 1 1.17 0zm7.36 1.7a1.86 1.86 0 0 0-1.23-.84 1.44 1.44 0 0 0-1.12.27c-.3.24-.5.55-.58.89-.25-.25-.57-.4-.91-.47-.28-.04-.56 0-.82.1l-2.18-2.18a1.56 1.56 0 0 0-2.2 0c-.2.2-.33.44-.4.7a1.56 1.56 0 0 0-2.63.75 1.6 1.6 0 0 0-2.23-.04 1.56 1.56 0 0 0 0 2.2c-.24.1-.5.24-.72.45a1.56 1.56 0 0 0 0 2.2l.52.52a1.56 1.56 0 0 0-.75 2.61L7 19a8.46 8.46 0 0 0 4.48 2.45 5.18 5.18 0 0 0 3.36-.5 4.89 4.89 0 0 0 4.2-1.51c2.75-2.77 2.54-5.74 1.43-7.59L18.1 7.68z"></path> </svg> </div></a></span> </div> <div class="pw-multi-vote-count l oo op oq or os ot ou"> <p class="bd b dl z dk"><span class="ov">--</span></p> </div> </div></span> <span class="l h g f ow ox"> <div class="ab q cb"> <div class="pw-multi-vote-icon di od oe of og"> <span><a class="ae af ag ah ai aj ak al am an ao ap aq ar as" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fangular-training%2F6f7bc9165443&operation=register&redirect=https%3A%2F%2Fblog.angulartraining.com%2Fcomponent-architecture-with-angular-6f7bc9165443&user=Alain+Chautard&userId=140cb12ffa1f&source=-----6f7bc9165443---------------------clap_footer-----------" rel="noopener follow"> <div class="oh ex et oi oj ok al ol om on og"> <svg width="24" height="24" viewbox="0 0 24 24" aria-label="clap"> <path fill-rule="evenodd" clip-rule="evenodd" d="M11.37.83L12 3.28l.63-2.45h-1.26zM13.92 3.95l1.52-2.1-1.18-.4-.34 2.5zM8.59 1.84l1.52 2.11-.34-2.5-1.18.4zM18.52 18.92a4.23 4.23 0 0 1-2.62 1.33l.41-.37c2.39-2.4 2.86-4.95 1.4-7.63l-.91-1.6-.8-1.67c-.25-.56-.19-.98.21-1.29a.7.7 0 0 1 .55-.13c.28.05.54.23.72.5l2.37 4.16c.97 1.62 1.14 4.23-1.33 6.7zm-11-.44l-4.15-4.15a.83.83 0 0 1 1.17-1.17l2.16 2.16a.37.37 0 0 0 .51-.52l-2.15-2.16L3.6 11.2a.83.83 0 0 1 1.17-1.17l3.43 3.44a.36.36 0 0 0 .52 0 .36.36 0 0 0 0-.52L5.29 9.51l-.97-.97a.83.83 0 0 1 0-1.16.84.84 0 0 1 1.17 0l.97.97 3.44 3.43a.36.36 0 0 0 .51 0 .37.37 0 0 0 0-.52L6.98 7.83a.82.82 0 0 1-.18-.9.82.82 0 0 1 .76-.51c.22 0 .43.09.58.24l5.8 5.79a.37.37 0 0 0 .58-.42L13.4 9.67c-.26-.56-.2-.98.2-1.29a.7.7 0 0 1 .55-.13c.28.05.55.23.73.5l2.2 3.86c1.3 2.38.87 4.59-1.29 6.75a4.65 4.65 0 0 1-4.19 1.37 7.73 7.73 0 0 1-4.07-2.25zm3.23-12.5l2.12 2.11c-.41.5-.47 1.17-.13 1.9l.22.46-3.52-3.53a.81.81 0 0 1-.1-.36c0-.23.09-.43.24-.59a.85.85 0 0 1 1.17 0zm7.36 1.7a1.86 1.86 0 0 0-1.23-.84 1.44 1.44 0 0 0-1.12.27c-.3.24-.5.55-.58.89-.25-.25-.57-.4-.91-.47-.28-.04-.56 0-.82.1l-2.18-2.18a1.56 1.56 0 0 0-2.2 0c-.2.2-.33.44-.4.7a1.56 1.56 0 0 0-2.63.75 1.6 1.6 0 0 0-2.23-.04 1.56 1.56 0 0 0 0 2.2c-.24.1-.5.24-.72.45a1.56 1.56 0 0 0 0 2.2l.52.52a1.56 1.56 0 0 0-.75 2.61L7 19a8.46 8.46 0 0 0 4.48 2.45 5.18 5.18 0 0 0 3.36-.5 4.89 4.89 0 0 0 4.2-1.51c2.75-2.77 2.54-5.74 1.43-7.59L18.1 7.68z"></path> </svg> </div></a></span> </div> <div class="pw-multi-vote-count l oo op oq or os ot ou"> <p class="bd b dl z dk"><span class="ov">--</span></p> </div> </div></span> </div> <div class="bo ab"> <div> <div class="bk" aria-hidden="false"> <button class="ex oh oz pa ab q et oj pb" aria-label="responses"> <svg width="24" height="24" viewbox="0 0 24 24" aria-label="responses" class="oy"> <path d="M18 16.8a7.14 7.14 0 0 0 2.24-5.32c0-4.12-3.53-7.48-8.05-7.48C7.67 4 4 7.36 4 11.48c0 4.13 3.67 7.48 8.2 7.48a8.9 8.9 0 0 0 2.38-.32c.23.2.48.39.75.56 1.06.69 2.2 1.04 3.4 1.04.22 0 .4-.11.48-.29a.5.5 0 0 0-.04-.52 6.4 6.4 0 0 1-1.16-2.65v.02zm-3.12 1.06l-.06-.22-.32.1a8 8 0 0 1-2.3.33c-4.03 0-7.3-2.96-7.3-6.59S8.17 4.9 12.2 4.9c4 0 7.1 2.96 7.1 6.6 0 1.8-.6 3.47-2.02 4.72l-.2.16v.26l.02.3a6.74 6.74 0 0 0 .88 2.4 5.27 5.27 0 0 1-2.17-.86c-.28-.17-.72-.38-.94-.59l.01-.02z"></path> </svg></button> </div> </div> </div> </div> <div class="ab q"> <div class="bk" aria-hidden="false" aria-describedby="postFooterSocialMenu" aria-labelledby="postFooterSocialMenu"> <div> <div class="bk" aria-hidden="false"> <button class="ae af ag ah ai aj ak hl am an ao ap aq ar as ba hn pc" aria-controls="postFooterSocialMenu" aria-expanded="false" aria-label="Share Post"> <svg width="24" height="24" viewbox="0 0 24 24" fill="none"> <path fill-rule="evenodd" clip-rule="evenodd" d="M15.22 4.93a.42.42 0 0 1-.12.13h.01a.45.45 0 0 1-.29.08.52.52 0 0 1-.3-.13L12.5 3v7.07a.5.5 0 0 1-.5.5.5.5 0 0 1-.5-.5V3.02l-2 2a.45.45 0 0 1-.57.04h-.02a.4.4 0 0 1-.16-.3.4.4 0 0 1 .1-.32l2.8-2.8a.5.5 0 0 1 .7 0l2.8 2.8a.42.42 0 0 1 .07.5zm-.1.14zm.88 2h1.5a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-11a2 2 0 0 1-2-2v-10a2 2 0 0 1 2-2H8a.5.5 0 0 1 .35.14c.1.1.15.22.15.35a.5.5 0 0 1-.15.35.5.5 0 0 1-.35.15H6.4c-.5 0-.9.4-.9.9v10.2a.9.9 0 0 0 .9.9h11.2c.5 0 .9-.4.9-.9V8.96c0-.5-.4-.9-.9-.9H16a.5.5 0 0 1 0-1z" fill="#000"></path> </svg></button> </div> </div> </div> <div class="pd l fn"> <span><a class="ae af ag ah ai aj ak al am an ao ap aq ar as" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2F6f7bc9165443&operation=register&redirect=https%3A%2F%2Fblog.angulartraining.com%2Fcomponent-architecture-with-angular-6f7bc9165443&source=--------------------------bookmark_footer-----------" rel="noopener follow"><button aria-controls="addToCatalogBookmarkButton" aria-expanded="false" aria-label="Add to list bookmark button" class="ae et ag ah ai aj ak hl am ex hq hr hs"> <svg width="25" height="25" viewbox="0 0 25 25" fill="none" class="hp" aria-label="Add to list bookmark button"> <path d="M18 2.5a.5.5 0 0 1 1 0V5h2.5a.5.5 0 0 1 0 1H19v2.5a.5.5 0 1 1-1 0V6h-2.5a.5.5 0 0 1 0-1H18V2.5zM7 7a1 1 0 0 1 1-1h3.5a.5.5 0 0 0 0-1H8a2 2 0 0 0-2 2v14a.5.5 0 0 0 .8.4l5.7-4.4 5.7 4.4a.5.5 0 0 0 .8-.4v-8.5a.5.5 0 0 0-1 0v7.48l-5.2-4a.5.5 0 0 0-.6 0l-5.2 4V7z" fill="#292929"></path> </svg></button></a></span> </div> </div> </div> </div> </div> </div> </footer> <div class="ab cl"> <div class="ff bf fg fh fi fj"></div> </div> <div class="l"> <div class="l bv nz"> <div class="l nz"> <div class="pe pf l bv"> <div class="ab cl"> <div class="ff bf fg fh fi fj"> <div class="ab q gu"> <h2 class="bd pg ph dn pi lp pj dp pk lt ki pl pm lx km pn po mb kq pp pq mf fo fq fr fs ft fu fv bi"><a class="ae af ag ah ai aj ak al am an ao ap aq ar as" href="//www.kaltexworkwear.com/blog/?source=post_page-----6f7bc9165443--------------------------------" rel="noopener follow">更多信息来自Angular Training</a></h2> <span><a class="bd b be z eb pr ec ed ee ef eg an eh ei ej ek el em eo de bk ep" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fsubscribe%2Fcollection%2Fangular-training%2F6f7bc9165443&operation=register&redirect=https%3A%2F%2Fblog.angulartraining.com%2Fcomponent-architecture-with-angular-6f7bc9165443&collection=Angular+Training&collectionId=8725e60f0d54&source=post_page-----6f7bc9165443---------------------follow_footer-----------" rel="noopener follow">遵循</a></span> </div> <div class="ps l ii"> <p class="bd b be z dk">学习Angular的教程和培训内容</ p >< / div >< / div >< / div >< / div >< / div ><div class="pt l"> <div class="pu pv l"> <div class="jv l pw"> <a class="bd b be z eb pr ec ed ee ef eg an eh ei ej ek el em eo de bk ep" href="//www.kaltexworkwear.com/blog/?source=post_page-----6f7bc9165443--------------------------------" rel="noopener follow">阅读更多角训练</a> </div> </div> </div> <div class="ab cl"> <div class="ff bf fg fh fi fj"> <div class="px pv l"></div> </div> </div> </div> </div> <div class="d"> <div class="py pz qa l nx qb qc id qd qe"> <div class="ab cl"> <div class="qf qg qh qi qj qk ff bf"> <a class="ae af ag ah ai aj ak al am an ql qm aq qn qo" aria-label="Go to homepage" href="https://medium.com/?source=post_page-----6f7bc9165443--------------------------------" rel="noopener follow"> <svg viewbox="0 0 3940 610" class="ec qp"> <path d="M594.79 308.2c0 163.76-131.85 296.52-294.5 296.52S5.8 472 5.8 308.2 137.65 11.69 300.29 11.69s294.5 132.75 294.5 296.51M917.86 308.2c0 154.16-65.93 279.12-147.25 279.12s-147.25-125-147.25-279.12S689.29 29.08 770.61 29.08s147.25 125 147.25 279.12M1050 308.2c0 138.12-23.19 250.08-51.79 250.08s-51.79-112-51.79-250.08 23.19-250.08 51.8-250.08S1050 170.09 1050 308.2M1862.77 37.4l.82-.18v-6.35h-167.48l-155.51 365.5-155.51-365.5h-180.48v6.35l.81.18c30.57 6.9 46.09 17.19 46.09 54.3v434.45c0 37.11-15.58 47.4-46.15 54.3l-.81.18V587H1327v-6.35l-.81-.18c-30.57-6.9-46.09-17.19-46.09-54.3V116.9L1479.87 587h11.33l205.59-483.21V536.9c-2.62 29.31-18 38.36-45.68 44.61l-.82.19v6.3h213.3v-6.3l-.82-.19c-27.71-6.25-43.46-15.3-46.08-44.61l-.14-445.2h.14c0-37.11 15.52-47.4 46.08-54.3m97.43 287.8c3.49-78.06 31.52-134.4 78.56-135.37 14.51.24 26.68 5 36.14 14.16 20.1 19.51 29.55 60.28 28.09 121.21zm-2.11 22h250v-1.05c-.71-59.69-18-106.12-51.34-138-28.82-27.55-71.49-42.71-116.31-42.71h-1c-23.26 0-51.79 5.64-72.09 15.86-23.11 10.7-43.49 26.7-60.45 47.7-27.3 33.83-43.84 79.55-47.86 130.93-.13 1.54-.24 3.08-.35 4.62s-.18 2.92-.25 4.39a332.64 332.64 0 0 0-.36 21.69C1860.79 507 1923.65 600 2035.3 600c98 0 155.07-71.64 169.3-167.8l-7.19-2.53c-25 51.68-69.9 83-121 79.18-69.76-5.22-123.2-75.95-118.35-161.63m532.69 157.68c-8.2 19.45-25.31 30.15-48.24 30.15s-43.89-15.74-58.78-44.34c-16-30.7-24.42-74.1-24.42-125.51 0-107 33.28-176.21 84.79-176.21 21.57 0 38.55 10.7 46.65 29.37zm165.84 76.28c-30.57-7.23-46.09-18-46.09-57V5.28L2424.77 60v6.7l1.14-.09c25.62-2.07 43 1.47 53.09 10.79 7.9 7.3 11.75 18.5 11.75 34.26v71.14c-18.31-11.69-40.09-17.38-66.52-17.38-53.6 0-102.59 22.57-137.92 63.56-36.83 42.72-56.3 101.1-56.3 168.81C2230 518.72 2289.53 600 2378.13 600c51.83 0 93.53-28.4 112.62-76.3V588h166.65v-6.66zm159.29-505.33c0-37.76-28.47-66.24-66.24-66.24-37.59 0-67 29.1-67 66.24s29.44 66.24 67 66.24c37.77 0 66.24-28.48 66.24-66.24m43.84 505.33c-30.57-7.23-46.09-18-46.09-57h-.13V166.65l-166.66 47.85v6.5l1 .09c36.06 3.21 45.93 15.63 45.93 57.77V588h166.8v-6.66zm427.05 0c-30.57-7.23-46.09-18-46.09-57V166.65L3082 212.92v6.52l.94.1c29.48 3.1 38 16.23 38 58.56v226c-9.83 19.45-28.27 31-50.61 31.78-36.23 0-56.18-24.47-56.18-68.9V166.66l-166.66 47.85V221l1 .09c36.06 3.2 45.94 15.62 45.94 57.77v191.27a214.48 214.48 0 0 0 3.47 39.82l3 13.05c14.11 50.56 51.08 77 109 77 49.06 0 92.06-30.37 111-77.89v66h166.66v-6.66zM3934.2 588v-6.67l-.81-.19c-33.17-7.65-46.09-22.07-46.09-51.43v-243.2c0-75.83-42.59-121.09-113.93-121.09-52 0-95.85 30.05-112.73 76.86-13.41-49.6-52-76.86-109.06-76.86-50.12 0-89.4 26.45-106.25 71.13v-69.87l-166.66 45.89v6.54l1 .09c35.63 3.16 45.93 15.94 45.93 57V588h155.5v-6.66l-.82-.2c-26.46-6.22-35-17.56-35-46.66V255.72c7-16.35 21.11-35.72 49-35.72 34.64 0 52.2 24 52.2 71.28V588h155.54v-6.66l-.82-.2c-26.46-6.22-35-17.56-35-46.66v-248a160.45 160.45 0 0 0-2.2-27.68c7.42-17.77 22.34-38.8 51.37-38.8 35.13 0 52.2 23.31 52.2 71.28V588z"></path> </svg></a> <div class="qq l"> <p class="bd b dl z qr"><a class="ae af ag ah ai aj ak al am an qs aq qn qo qt" href="https://medium.com/about?autoplay=1&source=post_page-----6f7bc9165443--------------------------------" rel="noopener follow">关于</a><a class="ae af ag ah ai aj ak al am an qs aq qn qo qt" href="https://help.medium.com/hc/en-us?source=post_page-----6f7bc9165443--------------------------------" rel="noopener follow">帮助</a><a class="ae af ag ah ai aj ak al am an qs aq qn qo qt" href="https://policy.medium.com/medium-terms-of-service-9db0094a1e0f?source=post_page-----6f7bc9165443--------------------------------" rel="noopener follow">条款</a><a class="ae af ag ah ai aj ak al am an qs aq qn qo" href="https://policy.medium.com/medium-privacy-policy-f03bf92035c9?source=post_page-----6f7bc9165443--------------------------------" rel="noopener follow">隐私</a></p> </div> <div class="j i d"> <hr class="oh qu qv qw" aria-hidden="true"> <h2 class="bd pg gx z io qr">使用Medium应用程序</ h2 ><div class="qq ab"> <div class="fl l"> <a class="ae af ag ah ai aj ak al am an ql qm aq qn qo" href="https://itunes.apple.com/app/medium-everyones-stories/id828256236?pt=698524&mt=8&ct=post_page&source=post_page-----6f7bc9165443--------------------------------" rel="noopener follow"><img alt="一个写着“在应用商店下载”的按钮，如果点击它将引导你进入iOS应用商店" class="" src="https://miro.medium.com/max/270/1*Crl55Tm6yDNMoucPo1tvDg.png" width="135" height="41" loading="lazy"></a> </div> <a class="ae af ag ah ai aj ak al am an ql qm aq qn qo" href="https://play.google.com/store/apps/details?id=com.medium.reader&source=post_page-----6f7bc9165443--------------------------------" rel="noopener follow"><img alt="一个写着“开始吧，谷歌Play”的按钮，如果点击它，就会引导你进入谷歌Play商店" class="" src="https://miro.medium.com/max/270/1*W_RAPQ62h0em559zluJLdQ.png" width="135" height="41" loading="lazy"></a> </div> </div> </div> </div> </div> </div> </div> </main> <div class="cm cn h co cp cq k cr cs ct j cu cv cw cx cy cz da db dc dd de c df dg"> <div class="dh bf bk di"> <div class="l m qx"> <div class="qy ab qz"> <div class="l ad"> <div class="ra rb rc l"></div> <div class="ra rb rc l"> <a class="ae af ag ah ai aj ak al am an ao ap aq ar as" href="https://angulartraining.medium.com/?source=---two_column_layout_sidebar----------------------------------" rel="noopener follow"> <div class="l di"> <img alt="betway必威滚球" class="l de bw rd re fd" src="https://miro.medium.com/fit/c/176/176/2*eKfxHLZ5a2vEesDLB-UAew.png" width="88" height="88" loading="lazy"> <div class="fb bw l rd re fc n"></div> </div></a> <div class="rf l"> <a class="ae af ag ah ai aj ak al am an ao ap aq ar as" href="https://angulartraining.medium.com/?source=---two_column_layout_sidebar----------------------------------" rel="noopener follow"><h2 class="pw-author-name bd pg gx z io bi"><span class="ii">betway必威滚球</span></h2></a> </div> <div class="rg l"> <span class="pw-follower-count bd b gx gy dk"><a class="ae af ag ah ai aj ak al am an ao ap aq ar as" href="https://angulartraining.medium.com/followers?source=---two_column_layout_sidebar----------------------------------" rel="noopener follow">2.7 k的追随者</a></span> </div> <div class="rh l"> <p class="bd b be z dk">谷歌Angular开发专家，顾问和培训师<a class="ae af ag ah ai aj ak al am an aq ar as ne ij" href="//www.kaltexworkwear.com/blog/" rel="noopener ugc nofollow">//www.kaltexworkwear.com</a></p> </div> <div class="ri rj ab"> <span><a class="bd b be z eb pr ec ed ee ef eg an eh ei ej ek el rk em eo de bk ep" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fsubscribe%2Fuser%2F140cb12ffa1f&operation=register&redirect=https%3A%2F%2Fblog.angulartraining.com%2Fcomponent-architecture-with-angular-6f7bc9165443&user=Alain+Chautard&userId=140cb12ffa1f&source=post_page-140cb12ffa1f--two_column_layout_sidebar-----------------------follow_profile-----------" rel="noopener follow">遵循</a></span> <div class="dj l"> <div> <div> <div class="bk" aria-hidden="false"> <div class="l"> <span><a class="ae af ag ah ai aj ak al am an ao ap aq ar as" href="https://medium.com/m/signin?actionUrl=%2F_%2Fapi%2Fsubscriptions%2Fnewsletters%2Ff6ef39abf45a&operation=register&redirect=https%3A%2F%2Fblog.angulartraining.com%2Fcomponent-architecture-with-angular-6f7bc9165443&newsletterV3=140cb12ffa1f&newsletterV3Id=f6ef39abf45a&user=Alain+Chautard&userId=140cb12ffa1f&source=---two_column_layout_sidebar-----------------------subscribe_user-----------" rel="noopener follow"><button class="bd b be z ro al rp mp rq rr rs rt ru rv eh ei ej ek el em eo de bk ep" aria-label="Subscribe"> <svg width="38" height="38" viewbox="0 0 38 38" fill="none" class="rl rm rn"> <rect x="26.25" y="9.25" width="0.5" height="6.5" rx="0.25"></rect> <rect x="29.75" y="12.25" width="0.5" height="6.5" rx="0.25" transform="rotate(90 29.75 12.25)"></rect> <path d="M19.5 12.5h-7a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1v-5"></path> <path d="M11.5 14.5L19 20l4-3"></path> </svg></button></a></span> </div> </div> </div> </div> </div> </div> </div> <div class="ra rb rc l"></div> </div> <div class="rw ab cb hf"> <div class="rx l"> <a class="ae af ag ah ai aj ak al am an ao ap aq ar as" href="https://help.medium.com/hc/en-us?source=---two_column_layout_sidebar----------------------------------" rel="noopener follow"><p class="bd b ry rz dk">帮助</ p ></a> </div> <div class="rx l"> <a class="ae af ag ah ai aj ak al am an ao ap aq ar as" href="https://medium.statuspage.io/?source=---two_column_layout_sidebar----------------------------------" rel="noopener follow"><p class="bd b ry rz dk">状态</ p ></a> </div> <div class="rx l"> <a class="ae af ag ah ai aj ak al am an ao ap aq ar as" href="https://about.medium.com/creators/?source=---two_column_layout_sidebar----------------------------------" rel="noopener follow"><p class="bd b ry rz dk">作家</ p ></a> </div> <div class="rx l"> <a class="ae af ag ah ai aj ak al am an ao ap aq ar as" href="https://blog.medium.com/?source=---two_column_layout_sidebar----------------------------------" rel="noopener follow"><p class="bd b ry rz dk">博客</ p ></a> </div> <div class="rx l"> <a class="ae af ag ah ai aj ak al am an ao ap aq ar as" href="https://medium.com/jobs-at-medium/work-at-medium-959d1a85284e?source=---two_column_layout_sidebar----------------------------------" rel="noopener follow"><p class="bd b ry rz dk">职业生涯</ p ></a> </div> <div class="rx l"> <a class="ae af ag ah ai aj ak al am an ao ap aq ar as" href="https://policy.medium.com/medium-privacy-policy-f03bf92035c9?source=---two_column_layout_sidebar----------------------------------" rel="noopener follow"><p class="bd b ry rz dk">隐私</ p ></a> </div> <div class="rx l"> <a class="ae af ag ah ai aj ak al am an ao ap aq ar as" href="https://policy.medium.com/medium-terms-of-service-9db0094a1e0f?source=---two_column_layout_sidebar----------------------------------" rel="noopener follow"><p class="bd b ry rz dk">条款</ p ></a> </div> <div class="rx l"> <a class="ae af ag ah ai aj ak al am an ao ap aq ar as" href="https://medium.com/about?autoplay=1&source=---two_column_layout_sidebar----------------------------------" rel="noopener follow"><p class="bd b ry rz dk">关于</ p ></a> </div> <div class="rx l"> <a class="ae af ag ah ai aj ak al am an ao ap aq ar as" href="https://speechify.com/medium?source=---two_column_layout_sidebar----------------------------------" rel="noopener follow"><p class="bd b ry rz dk">从文字到演讲</ p ></a> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div style="text-align:center;margin-bottom:5px;"><form action="http://www.baidu.com/baidu" target="_blank"><div bgcolor="#FFFFFF" style="text-align:center;"><input name="tn" type="hidden" value="baidu"><a href="http://www.baidu.com/"><img src="http://img.baidu.com/img/logo-80px.gif" width="80px" height="29px" alt="Baidu" align="bottom" border="0"></a><input type="text" name="word" size="30" placeholder="" value=""><input type="submit" value="baidu"></div></form></div><div id="so360" style="text-align:center;margin-bottom:5px;"><form action="https://www.so.com/" target="_blank" id="so360form"><img src="http://p1.qhimg.com/d/_onebox/search.png" width="100px" height="25px"> <input type="text" autocomplete="off" name="q" id="so360_keyword" placeholder="" value=""> <input type="submit" id="so360_submit" value="360"> <input type="hidden" name="ie" value="gbk"><input type="hidden" name="src" value="zz"> <input type="hidden" name="site" value="so.com"> <input type="hidden" name="rg" value="1"></form></div><div id="sogou" style="text-align:center;margin-bottom:5px;"><form action="https://www.sogou.com/" target="_blank" id="so360form"><img src="https://www.sogou.com/web/index/images/logo_440x140.v.4.png" width="100px" height="25px"> <input type="text" autocomplete="off" name="q" id="sogou.com_keyword" placeholder="" value=""> <input type="submit" id="sogou_submit" value="sougou"> <input type="hidden" name="ie" value="gbk"><input type="hidden" name="src" value="zz"> <input type="hidden" name="site" value="so.com"> <input type="hidden" name="rg" value="1"></form></div><div align="center"><a target="_blank" href="/sitemap.xml">map</a></div></body> </html>