Angular2 Typescript組件加載教程/調試？

Question

我正在使用Angular-CLI，並且首次使用ES6模塊和導入功能，而且我很難理解它們。我基本上開始了一個新的項目，其中包含「ng Angular2Facebook」，然後是「g組件登錄」。創建這種結構：

dist 
    app 
    components 
     login 
node_modules 
src 
    app 
    components 
     login 
     login.ts 
    angular2-facebook.ts 
app.ts 

我終於想通了使用該組件的相對路徑導入我自己的組件，以避免編譯錯誤：

import {Login} from './components/login/login'; // error 

因爲我不再獲得編譯錯誤，我我很確定這是正確的地方，但我的angular2-facebook視圖中的<login>沒有被替換爲模板。實際上，生成的login.js沒有被執行。如果我去我的主app.ts文件並導入它，仍然沒有。如果我補充一點：

console.dir(new Login()); 

然後我可以看到該文件被加載，因爲「出口類‘登錄’」被顯示在控制檯中，但仍標籤不要被模板替換。這裏的Login.ts：

import {Component} from 'angular2/core'; 

@Component({ 
    selector: 'login', 
    //templateUrl: 'app/components/login/login.html', 
    template: '<h1>LOGIN TEMPLATE</h1>', 
    styleUrls: ['app/components/login/login.css'], 
    providers: [], 
    directives: [], 
    pipes: [] 
}) 
export class Login { 
    constructor() { 
     console.log("Login constructor()"); 
    } 
} 

console.log('exported class "Login"'); 

而且angular2-facebook.ts這始終是跑：

import {Component} from 'angular2/core'; 
import {Login} from './components/login/login'; 
import {FacebookTest1} from './components/facebook-test1/facebook-test1'; 

@Component({ 
    selector: 'angular2-facebook-app', 
    providers: [], 
    templateUrl: 'app/angular2-facebook.html', 
    directives: [], 
    pipes: [] 
}) 
export class Angular2FacebookApp { 
    defaultMeaning: number = 42; 

    meaningOfLife(meaning) { 
     return `The meaning of life is ${meaning || this.defaultMeaning}`; 
    } 
} 

console.log('ran angular2-facebook.ts'); 

而且這是越來越受約束的角度angular2-facebook.html，但不具備Facebook的TEST1標籤的登錄所取代：

<p> 
{{meaningOfLife()}} ({{defaultMeaning}}) 
</p> 

<login>Inside login tags</login> 

<facebook-test1>Inside facebook-test1 tags</facebook-test1> 

我真的想是某種教程或書籍，我可以看明白是怎麼回事引擎蓋下，所以我可以調試這些東西我自己，我只是不明白爲什麼它不會使用我的組件。如果我把<login>Loading...</login>在HTML頁面，而不是Facebook的應用程序組件，並引導它，它顯示罰款：

//bootstrap(Angular2FacebookApp); 
bootstrap(Login); 

Answer 1

的Login組件添加到您的Directives列表中你Angular2FacebookApp組件。

@Component({ 
    selector: 'angular2-facebook-app', 
    providers: [], 
    templateUrl: 'app/angular2-facebook.html', 
    directives: [Login], 
    pipes: [] 
}) 

這告訴角度與組件的一個實例來代替<login>標籤。

沒有這個角度不知道它需要替換這個標籤。

Answer 2

在Angular2網絡這個鏈接https://angular.io/docs/ts/latest/tutorial/toh-pt3.html#你可以看到，添加directives: [...ClassName]的@Components內，例如：

import {Component} from 'angular2/core'; 
import {Login} from './components/login/login'; 
import {FacebookTest1} from './components/facebook-test1/facebook-test1'; 

@Component({ 
    selector: 'angular2-facebook-app', 
    providers: [], 
    templateUrl: 'app/angular2-facebook.html', 
    directives: [Login], 
    pipes: [] 
}) 
//Rest of code 

，你可以瞭解更多詳情看文件名app.appcomponet.ts，希望幫助。