typescript - 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

由于我不再遇到编译错误，所以我很确定这是正确的位置，但是 <login>在我的 angular2-facebook View 中，没有被模板替换。事实上，生成的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 的绑定(bind)，但没有替换 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: []
})

这告诉 Angular 替换 <login>用您的组件实例进行标记。

如果没有这个 Angular ，它不知道它需要替换这个标签。