Angular中Component/Service的示例分析

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

關(guān)于Angular Component

css樣式的作用域、Shadow DOM

Shadow DOM是HTML規(guī)范的一部分，它允許開發(fā)人員封裝自己的HTML標(biāo)記，CSS樣式和JavaScript。創(chuàng)建樣式Component時(shí)，可以通過設(shè)置，啟用?！鞠嚓P(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）對象，可以用于臨時(shí)存放全局變量。 對于復(fù)雜的全局變量，推薦使用狀態(tài)管理組件（state management - Ngrx）。

forRoot() 模式

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

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

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

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

看完了這篇文章，相信你對“Angular中Component/Service的示例分析”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！