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

Question

我正在使用Angular-CLI並首次使用ES6模塊和導入，但很難理解它們。 我基本上從“ ng new Angular2Facebook”然后是“ ng g component Login”開始了一個新項目。 這創建了以下結構：

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””，但是仍然沒有用模板替換標簽。 這是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，它將被angular綁定，但是沒有替換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組件添加到Angular2FacebookApp組件中的“ Directives列表中。

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

這告訴angular用組件實例替換<login>標記。

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

Answer 2

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

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以獲得更多詳細信息，希望能對您有所幫助。