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以获得更多详细信息，希望能对您有所帮助。