Angular引入模塊封裝概念

Angular 以類似于 ES 模塊的方式引入了模塊封裝的概念。

它基本上意味著可聲明的類型——組件、指令和管道——只能由在該模塊內(nèi)聲明的組件使用。

例如，如果我嘗試使用下面的代碼在 App 模塊的 App 組件內(nèi)使用 A 模塊中的 a-comp：

@Component({
  selector: 'my-app',
  template: `
      <h1>Hello {{name}}</h1>
      <a-comp></a-comp>
  `
})
export class AppComponent { }

錯誤消息

Template parse errors: ‘a-comp’ is not a known element

這是因?yàn)?App 模塊中沒有聲明 a-comp。 如果我想使用這個組件，我需要導(dǎo)入定義這個組件的模塊。解決方案如下：

@NgModule({
  imports: [..., AModule]
})
export class AppModule { }

這就是封裝發(fā)揮作用的地方：A 模塊必須通過將 a-comp 添加到 exports 數(shù)組來將其聲明為在其他 module 內(nèi)可用：

@NgModule({
  ...
  declarations: [AComponent],
  exports: [AComponent]
})
export class AModule { }

大多數(shù) Angular 新手認(rèn)為 Providers 也有封裝，這種想法是錯誤的?？梢栽趹?yīng)用程序內(nèi)的任何位置訪問在任何非延遲加載模塊中聲明的 Providers.

Modules hierarchy

關(guān)于 imported modules 的最大困惑是開發(fā)人員認(rèn)為這些被導(dǎo)入的 Modules 在應(yīng)用運(yùn)行時維護(hù)了一種層次結(jié)構(gòu)，并且假設(shè)導(dǎo)入其他模塊的模塊成為被導(dǎo)入模塊的父模塊。

然而，事實(shí)并非如此。所有模塊在編譯階段合并。因此，導(dǎo)入的模塊和導(dǎo)入的模塊之間沒有層次關(guān)系。

所需命名空間之一被定義為默認(rèn)命名空間。 此命名空間的控制標(biāo)記不需要前綴。

<View> 標(biāo)簽是必需的，在上面的示例中，核心命名空間在第一行定義。 當(dāng)然開發(fā)人員可以定義任何名稱。 例如，為了使標(biāo)簽名稱更短，還可以使用 c 而不是 core.

以上就是Angular 模塊封裝概念常見的錯誤分析理解的詳細(xì)內(nèi)容，更多關(guān)于Angular 模塊封裝概念分析的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論