淺談Angular中的Component/Service

本篇文章要為大家介紹一下Angular中的Component/Service。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

關於Angular Component

css樣式的作用域、Shadow DOM

#Shadow DOM是HTML規範的一部分，它允許開發人員封裝自己的HTML標記，CSS樣式和JavaScript。建立樣式Component時，可以透過設置，啟用。 【相關教學推薦：《angular教學》】

@Component({
  selector: 'my-app',
  template: `
    <h1 id="Hello-nbsp-World">Hello World!</h1>
    <span class="red">Shadow DOM Rocks!</span>
  `,
  styles: [`
    :host {
      display: block;
      border: 1px solid black;
    }
    h1 {
      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的詳細內容。更多資訊請關注PHP中文網其他相關文章！