2016-02-08 104 views
2

我正在使用Angular-CLI,并且首次使用ES6模块和导入功能,而且我很难理解它们。我基本上开始了一个新的项目,其中包含“ng Angular2Facebook”,然后是“g组件登录”。创建这种结构:Angular2 Typescript组件加载教程/调试?

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); 

回答

2

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

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

这告诉角度与组件的一个实例来代替<login>标签。

没有这个角度不知道它需要替换这个标签。

+0

现在我觉得自己像个白痴。谢谢! –

1

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,希望帮助。

+0

我认为你只需要bootstrap(Angular2FacebookApp);现在 –