Դիտել Էկապսուլյացիան

Angular-ը ֆանտաստիկ մոտեցում ունի Component-ի հատուկ ոճավորմանը, որը թույլ է տալիս ծրագրավորողներին վստահորեն գրել ոճեր՝ չվախենալով, որ այդ ոճերը ներթափանցեն հավելվածի այլ բաղադրիչներ կամ մասեր, նույնիսկ եթե սահմանված դասերի անունները նույնական են այլ բաղադրիչների անուններին: . Այն դա անում է կանխադրված Emulated View Encapsulation Strategy-ի միջոցով:

Ընդօրինակված

Սա ձեր Հավելվածի View Encapsulation ռազմավարության լռելյայն տարբերակն է: Հնարավոր է՝ պարզ չլինի, եթե առաջին անգամ եք նայում սա, բայց Emulated անունը վերաբերում է զննարկիչի Shadow DOM-ը նմանակող Angular-ին: Դա անում է ձեր ոճերը արդյունավետ կերպով փաթաթելով հրահանգի մեջ, որը դուք կարող եք նկատել, երբ ստուգել եք ձեր Dev Tools-ի տարրերը՝ «_ngcontent-…»: Եթե ​​նավարկեք դեպի ձեր Հավելվածի ‹head›, կնկատեք, որ բոլոր ոճերը կիրառելի են միայն այն դեպքում, երբ դրանք ուղեկցվում են համապատասխան _ngcontent-… հրահանգով: օրինակ.
`.app-layout__content__container[_ngcontent-xxr-c321] { }`
Այստեղ պետք է նշել մի բան. Հավելվածի ողջ ոճը կպարունակվի ‹head› թեգում, սա տարբերվում է նրանից, թե ինչպես է ShadowDOM-ը կսահմանի իր ոճը:

Ոչ ոք

Այս տարբերակն անում է այն, ինչ ասվում է թիթեղի վրա, Angular-ը չի ներառում որևէ ոճ այս բաղադրիչում գրված ոճերի վրա և կարող է արյունահոսել հավելվածի մնացած մասում: Սա արդյունավետորեն բաղադրիչ գրված ոճերը վերածում է գլոբալ ոճերի:

Shadow DOM

Shadow DOM-ը դեռ չի աջակցվում բոլոր բրաուզերներում, այնպես որ համոզվեք, որ ստուգեք աջակցվող բրաուզերները՝ նախքան այն միացնելը ձեր սեփական հավելվածում: Եթե ​​միացնեք ViewEncapsulation.ShadowDOM-ը, Angular-ը կօգտագործի զննարկչի մայրենի Shadow DOM API-ն, և դուք կկարողանաք տեսնել, որ ի տարբերություն նմանակված ռազմավարության, Shadow DOM-ը պարունակում է իր ոճավորումը բաղադրիչի ‹style› թեգի մեջ, այլ ոչ թե html ֆայլի ‹head›:

Դուք կարող եք տեսնել, որ երեխայի բաղադրիչն օգտագործում է #shadow-root-ը և ունի ոճի պիտակներ, որոնք սահմանված են դրա ներսում: Այնուամենայնիվ, խորհուրդ չի տրվում խառնել ռազմավարությունները, քանի որ այն ձևով, որը ներկայումս սահմանված է, գույնը՝ կարմիր; ոճավորումը կկիրառվի բոլոր հետագա ‹p› պիտակների վրա, նույնիսկ այլ զավակների բաղադրիչների ներսում, որոնք ունեն Emulated encapsulation: Ստորև բերված օրինակում կտեսնեք, որ թոռ ‹p› պիտակի վրա հաշվարկված ոճավորումը ստացվել է երեխայի բաղադրիչից՝ չնայած թոռնիկի View Encapsulation ռազմավարության փոփոխություններին:

Ռազմավարությունների համադրում

Քանի որ ես հանդիպում եմ այս ռազմավարությունների համադրման իմաստալից եղանակներին, ես դրանք կներառեմ այստեղ որպես օրինակներ:
Օրինակ 1:

::նգ-խոր

::ng-deep, որը նախկինում հայտնի էր որպես ››› կամ /deep/, թափանցում է ShadowDOM encapsulation-ը և թույլ է տալիս կիրառել ոճեր երեխայի բաղադրիչների վրա ձեր հոսթ բաղադրիչի վրա: Խորհուրդ է տրվում, որ ::ng-deep-ը օգտագործվի միայն այն դեպքում, երբ Emulated Encapsulation-ը միացված է և պետք է օգտագործվի զգուշությամբ: Եթե ​​հնարավոր է, գտեք ձեր բաղադրիչների կառուցվածքի և ոճավորման ավելի արդյունավետ միջոց, եթե գտնում եք, որ դուք դիմում եք այս պրակտիկայի:

::ng-deep-ի հետ կապված խնդիրն այն է, որ այն կկիրառվի նույնանուն բոլոր հաջորդ դասերի վրա: Դուք կարող եք խուսափել դրանից՝ համոզվելով, որ ::ng-deep-ը փաթաթված է մայր դասի կամ բաղադրիչի մեջ, օրինակ՝
`:host ::ng-deep .targeted-class {}`
կամ
`.container ::ng-deep .targeted-class{} `
Հետևելով վերը նշված պրակտիկային, ձեր նպատակային դասի շրջանակը կտարածվի պարունակող բաղադրիչի ներսում, երբ միացված է Emulated encapsulation, օրինակ`
`: կոնտեյներ[_ngcontent-xxx] .targeted-class{}`

:հյուրընկալող

Host-ը դիտման ներփակման ռազմավարության շատ արժեքավոր մասն է, ինչպես կարող եք տեսնել, երբ այն կիրառվում է ::ng-deep-ի էֆեկտները պարունակելու համար: Այն վերաբերում է միայն հյուրընկալող բաղադրիչին և պարունակում է ::ng-deep-ի պես մի բան, որը կարող է ազդել միայն այդ մեկ հոսթի զավակ բաղադրիչների վրա: Այն կարելի է գտնել նմանակված View Encapsulation-ում, ինչպես, օրինակ, [_nghost-c0]:

Հաջորդ գլուխ. Համաշխարհային ոճերի և ոճերի գրադարանների օգտագործումը

Հետագա ընթերցանության նյութ
- Անկյունային տեսքի ներփակման փաստաթղթեր
- Shadow DOM
- Web Components
- Օգտագործելով :host