爲什麼我的Angular 2中的根組件嵌套html？

我在第n次獲得角度2設置時最困難。每當我嘗試從頭開始一個新項目以鞏固知識時，我所採取的每一步都會出現很多奇怪的問題。爲什麼我的Angular 2中的根組件嵌套html？

我目前有以下依賴項。

"dependencies": { 
    "angular2": "2.0.0-beta.1", 
    "systemjs": "0.19.17", 
    "es6-promise": "^3.0.2", 
    "es6-shim": "^0.33.3", 
    "reflect-metadata": "0.1.2", 
    "rxjs": "5.0.0-beta.0", 
    "zone.js": "0.5.10" 
    },

我的index.html是非常簡單的

<!DOCTYPE html> 
<html> 
<head> 
    <base href="/" ></base> 
    <meta charset="utf-8" ></meta> 
    <title></title> 

    <script src="lib/vendors.js"></script> 
    <script> 
     System.config({ 
      packages: { 
       "app/": { defaultExtension: "js" } 
      } 
     }); 

     System.import("app/boot"); 
    </script> 
</head> 
<body> 
    <app>Loading...</app> 
</body> 
</html>

我的靴子

import { bootstrap } from "angular2/platform/browser"; 
import { ROUTER_PROVIDERS } from "angular2/router"; 
import { AppComponent } from "./app.component"; 

bootstrap(AppComponent, [ROUTER_PROVIDERS]);

我app.component

import { Component } from "angular2/core"; 

@Component({ 
    selector: "app", 
    templateUrl: "app.html" 
}) 
export class AppComponent { }

的app.html只是一個<div>Hello World</div>

當我運行這個時，應用程序組件嵌套整個html樹。我無法弄清楚爲什麼。

[1]

更新[在這裏輸入的形象描述] [1]！]：

看來，問題是否自行解決，如果我從我的<base>和<meta>標籤，去掉結束標記被添加，因爲角向我投訴，並指定app.html templateUrl的完整路徑。

import「Component」from「angular2/core」;

@Component({ 
    selector: "app", 
    templateUrl: "app/app.html" 
}) 
export class AppComponent { }

如果我試圖通過添加的moduleId使用相對URL路徑功能：module.id選項，它不會呈現什麼......儘管這適用於不在根組件的組件。如果任何人有意見，爲什麼這是在評論中，我將不勝感激。

@Component({ 
    selector: "app", 
    moduleId: module.id, 
    templateUrl: "app/app.html" 
})

來源

2016-01-24 twilliams

當您在瀏覽器的地址欄中輸入「http：// localhost： /app.html」時會發生什麼？你有你的Hello World div嗎，還是你得到了index.html？ –

我得到了index.html，因爲我的服務器將所有非有效請求重定向回index.html。 app.html文件位於app/app.html中，看起來如果我將我的templateUrl更改爲「app/app.html」，它就會起作用。但是，如果我嘗試通過向@Component添加moduleId：module.id來使用相對URL，它不起作用。那麼什麼都沒有。 – twilliams

我沒有答案，但你至少應該編輯你的問題來說清楚。 –

<base href="/" ></base> 
<meta charset="utf-8" ></meta>

不應該有結束標記。我不知道這是否能解決您的問題，但Angular2在測試版中對無效HTML變得更加迂腐。

來源

2016-01-24 11:34:08

嗯，看看就是這樣。我添加了那些結束標記，因爲它向我拋出錯誤，我發現這是阻止它的解決方案。如果我刪除他們，我開始得到這樣的錯誤http://i.imgur.com/FXoHL2t.png – twilliams

解決方案似乎是擺脫結束標籤，就像你提到的（我只是因爲以前的錯誤而添加），並設置我的app.html模板（templateUrl：「app/app.html」）的絕對路徑。爲什麼我無法在根組件中使用moduleId：module.id的相關url？ – twilliams

其實''允許結束標籤，但不需要它。''標記不得有結束標記https://developer.mozilla.org/de/docs/Web/HTML/Element/meta。看起來像一個錯誤。我想知道爲什麼Angular會分析頭部。我不使用TS（只有Dart），也不知道如何使用TS的相對路徑。 –

爲什麼我的Angular 2中的根組件嵌套html？

回答

相關問題