[英]Angular2 Typescript component loading tutorial/debugging?
I'm using Angular-CLI and working with ES6 modules and imports for the first time and I'm having a hard time understanding them. 我正在使用Angular-CLI并首次使用ES6模块和导入,但很难理解它们。 I basically started a new project with 'ng new Angular2Facebook' then `ng g component Login'. 我基本上从“ ng new Angular2Facebook”然后是“ ng g component Login”开始了一个新项目。 That created this structure: 这创建了以下结构:
dist
app
components
login
node_modules
src
app
components
login
login.ts
angular2-facebook.ts
app.ts
I finally figured out to use a relative path to the component for importing my own components to avoid compile errors: 我终于想出了使用组件的相对路径来导入我自己的组件,以避免编译错误的方法:
import {Login} from './components/login/login'; // error
Since I no longer get compile errors, I'm pretty sure it's the right place, but the <login>
in my angular2-facebook view is not getting replaced with the template. 由于不再出现编译错误,因此我可以确定这是正确的地方,但是我的angular2-facebook视图中的<login>
不会被模板所代替。 In fact, the generated login.js is not being executed. 实际上,生成的login.js未被执行。 If I go to my main app.ts file and import it, still nothing. 如果我转到主app.ts文件并将其导入,还是没有。 If I add this: 如果我添加此:
console.dir(new Login());
Then I can see the file is loaded because 'exported class "Login"' is displayed in the console, but still the tags don't get replaced by the template. 然后,我可以看到文件已加载,因为控制台中显示了“导出的类” Login””,但是仍然没有用模板替换标签。 Here's Login.ts: 这是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"');
And angular2-facebook.ts which is always ran: 和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');
And angular2-facebook.html which is getting bound by angular, but which doesn't have the login of facebook-test1 tags being replaced: 和angular2-facebook.html,它将被angular绑定,但是没有替换facebook-test1标签的登录名:
<p>
{{meaningOfLife()}} ({{defaultMeaning}})
</p>
<login>Inside login tags</login>
<facebook-test1>Inside facebook-test1 tags</facebook-test1>
What I would really like is some kind of tutorial or book I could read to understand what is going on under the hood so I could debug these things myself, I just don't understand why it wouldn't be using my component. 我真正想要的是某种教程或书,我可以阅读它们以了解幕后的情况,以便自己调试这些东西,我只是不明白为什么它不使用我的组件。 If I put <login>Loading...</login>
in the html page instead of the facebook app component and bootstrap it, it displays fine: 如果我将<login>Loading...</login>
放置在html页面而不是facebook应用程序组件中,并对其进行引导,它将显示正常:
//bootstrap(Angular2FacebookApp);
bootstrap(Login);
Add the Login
component to your list of Directives
in your Angular2FacebookApp
component. 将“ Login
组件添加到Angular2FacebookApp
组件中的“ Directives
列表中。
@Component({
selector: 'angular2-facebook-app',
providers: [],
templateUrl: 'app/angular2-facebook.html',
directives: [Login],
pipes: []
})
This tells angular to replace the <login>
tag with an instance of your component. 这告诉angular用组件实例替换<login>
标记。
Without this angular doesn't know that it needs to replace this tag. 没有这个角度的人不知道它需要替换这个标签。
In this link of Angular2
web https://angular.io/docs/ts/latest/tutorial/toh-pt3.html# you can see that adding directives: [...ClassName]
inside of @Components
for example: 在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
you can watch the file name app.appcomponet.ts
for more details, hopefully help. 您可以查看文件名app.appcomponet.ts
以获得更多详细信息,希望能对您有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.