角2自舉

考慮具有角2.角2自舉

的index.html

<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
</head> 
<body> 
    <app-root></app-root> 
</body> 
</html>

main.ts經典第一簡單的例子

import { enableProdMode } from '@angular/core'; 
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { AppModule } from './app/app.module'; 
platformBrowserDynamic().bootstrapModule(AppModule)

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { AppComponent } from './app.component'; 

@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { }

app.component.ts

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html' 
}) 

export class AppComponent { }

我的問題是根模塊是如何知道到哪裏去尋找才能找到選擇應用程序根？默認情況下是index.html，還是定義在哪裏？如果不是index.html，我們有index1.html應用程序不應該工作。爲什麼？

來源

2017-10-17 Unknown developer

在index.html中搜索選擇器是Angular的默認行爲，如粗略提到here。

如果項目使用Angular CLI運行，則可以使用.angular-cli.json中的index條目修改該文件。

來源

2017-10-17 21:19:04 jowey

簡單回答它是如何揭開序幕

"apps": [ 
    { 
     "root": "src", 
     "outDir": "dist", 
     "assets": [ 
     "assets", 
     "favicon.ico" 
     ], 
     "index": "index.html", 
     "main": "main.ts", 
     "polyfills": "polyfills.ts", 
     "test": "test.ts", 
     "tsconfig": "tsconfig.app.json", 
     "testTsconfig": "tsconfig.spec.json", 
     "prefix": "app", 
     "styles": [ 
     "styles.css" 
     ]

的angular-cli.json文件提供應用程序配置的角度。

龍回答它如何拼湊

選擇器代表其整體的組件。在這種情況下，app-root會將./app.component.html，./app.component和./app.component.css（如果有）加載到要使用的瀏覽器DOM中。所以，如果你有下列組件

HomeComponent

UserComponent

他們每個人都有各自的名稱上面的文件。如果在HomeComponentHTML文件中添加<app-user></app-user>（如上面的index.html）。它會在那個地方加載UserComponent。

根模塊如何知道在哪裏搜索以查找選擇器app-root？

對此的答案是app.module.ts;您必須告知AppModule在您的應用中，在哪裏可以找到components，modules和services。例如，如果您從declarations: []陣列中刪除AppComponent;它不再知道在哪裏找到該組件，並且會看到錯誤。

聲明：[]

此列表中您的應用程序的Components。在AppModule中，您應該只包含最低要求components以便您的應用程序啓動。從那裏你應該建立level文件夾結構。每個級別可以有自己的Module。

進口：[]

此列表中的所有您的應用程序使用的模塊。這包括您的應用中的子levels。

提供商：[]

此列表應用中的所有服務。

在這裏，在樣本的多層應用程序也能像

src 
|app.component.css 
|app.component.html 
|app.component.ts 
|app.module.ts 
    home 
     |home.component.css 
     |home.component.html 
     |home.component.ts 
     |home.module.ts 
    user 
     |user.component.css 
     |user.component.html 
     |user.component.ts 
     |user.module.ts 
    services 
     |user.service.ts

在這種情況下，您app.module.ts看起來像這樣

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { AppComponent } from './app.component'; 
import { HomeModule } from './home/home.module'; 
import { UserModule } from './user/user.module'; 
import { UserService } from './services/user.service'; 

@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule, 
    HomeModule, 
    UserModule 
    ], 
    providers: [, 
    UserService 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { }

所以類似的結構將在HomeModule和UserModule文件這個他們各自的文件和服務。

只要您將所有模塊導入到AppModule中，則無需聲明已在Module中聲明的Component。

來源

2017-10-17 21:27:32

回答

相關問題