小編給大家分享一下Angular中Component/Service的示例分析，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

成都創(chuàng)新互聯(lián)專注于河口企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站設(shè)計(jì),商城網(wǎng)站定制開發(fā)。河口網(wǎng)站建設(shè)公司,為河口等地區(qū)提供建站服務(wù)。全流程按需制作網(wǎng)站，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

關(guān)于Angular Component

css樣式的作用域、Shadow DOM

Shadow DOM是HTML規(guī)范的一部分，它允許開發(fā)人員封裝自己的HTML標(biāo)記，CSS樣式和JavaScript。創(chuàng)建樣式Component時(shí)，可以通過設(shè)置，啟用。【相關(guān)教程推薦：《angular教程》】

@Component({
  selector: 'my-app',
  template: `
    <h2>Hello World!</h2>
    <span class="red">Shadow DOM Rocks!</span>
  `,
  styles: [`
    :host {
      display: block;
      border: 1px solid black;
    }
    h2 {
      color: blue;
    }
    .red {
      background-color: red;
    }
  `],
  encapsulation: ViewEncapsulation.ShadowDom
})
class MyApp {
}

ViewEncapsulation可選值：

• ViewEncapsulation.Emulated - 通過 Angular 提供的樣式包裝機(jī)制來封裝組件，使得組件的樣式不受外部影響。這是 Angular 的默認(rèn)設(shè)置。

• ViewEncapsulation.Native - 使用原生的 Shadow DOM 特性。但需要考慮瀏覽器是否支持。

• ViewEncapsulation.None - 無 Shadow DOM，并且也無樣式包裝

關(guān)于Angular Service

服務(wù)（Service）充當(dāng)著數(shù)據(jù)訪問，邏輯處理的功能。把組件和服務(wù)區(qū)分開，以提高模塊性和復(fù)用性。

單例服務(wù)（singleton）

• 使用Angular CLI創(chuàng)建服務(wù)，默認(rèn)會(huì)創(chuàng)建單例服務(wù)；

• 把 @Injectable() 的 providedIn 屬性聲明為 root, 即為單例服務(wù)。

• 單例服務(wù)（singleton）對(duì)象，可以用于臨時(shí)存放全局變量。 對(duì)于復(fù)雜的全局變量，推薦使用狀態(tài)管理組件（state management - Ngrx）。

forRoot() 模式

如果多個(gè)調(diào)用模塊同時(shí)定義了 providers (服務(wù))，那么在多個(gè)特性模塊中加載此模塊時(shí)，這些服務(wù)就會(huì)被注冊(cè)在多個(gè)地方。這會(huì)導(dǎo)致出現(xiàn)多個(gè)服務(wù)實(shí)例，并且該服務(wù)的行為不再像單例一樣 。有多種方式來防止這種現(xiàn)象：

• 用 providedIn 語法代替在模塊中注冊(cè)服務(wù)的方式。

• 把服務(wù)分離到它們自己的模塊中。

• 在模塊中分別定義 forRoot() 和 forChild() 方法。

看完了這篇文章，相信你對(duì)“Angular中Component/Service的示例分析”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)頁名稱：Angular中Component/Service的示例分析
鏈接分享：http://www.aaarwkj.com/article16/gjcidg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、商城網(wǎng)站、Google、域名注冊(cè)、ChatGPT、動(dòng)態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)