我正在使用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>
没有被模板替换。 实际上,生成的登录.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它被 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);
将Login
组件添加到Angular2FacebookApp
组件中的Directives
列表中。
@Component({
selector: 'angular2-facebook-app',
providers: [],
templateUrl: 'app/angular2-facebook.html',
directives: [Login],
pipes: []
})
这告诉 angular 将<login>
标签替换为组件的实例。
没有这个角度不知道它需要替换这个标签。
在 Angular2
Web 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
以获取更多详细信息,希望对您有所帮助。