Angular中Component/Service的示例分析

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

關于Angular Component

css樣式的作用域、Shadow DOM

Shadow DOM是HTML規范的一部分，它允許開發人員封裝自己的HTML標記，CSS樣式和JavaScript。創建樣式Component時，可以通過設置，啟用?！鞠嚓P教程推薦：《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 提供的樣式包裝機制來封裝組件，使得組件的樣式不受外部影響。這是 Angular 的默認設置。

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

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

關于Angular Service

服務（Service）充當著數據訪問，邏輯處理的功能。把組件和服務區分開，以提高模塊性和復用性。

單例服務（singleton）

• 使用Angular CLI創建服務，默認會創建單例服務；

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

• 單例服務（singleton）對象，可以用于臨時存放全局變量。 對于復雜的全局變量，推薦使用狀態管理組件（state management - Ngrx）。

forRoot() 模式

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

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

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

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

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