Angular 2、主组件里面的组件
Angular 2, component inside main component
我在 angular.io 上玩过 angular 2 演示。
现在我想创建一个新组件并在我的应用程序中使用它。
我当前的应用:
import {Component, Template, bootstrap} from 'angular2/angular2';
import {UsersComponent} from './components/users/component.js';
// Annotation section
@Component({
selector: 'my-app'
})
@Template({
url:"app.html"
})
// Component controller
class MyAppComponent {
newName:string;
names:Array<string>;
constructor() {
this.name = 'Florian';
}
showAlert(){
alert("It works");
}
addName(){
names.push(newName);
newName = "";
}
}
bootstrap(MyAppComponent);
我的组件:
import {Component, Template, bootstrap} from 'angular2/angular2';
// Annotation section
@Component({
selector: 'users'
})
@Template({
url:"./template.html"
})
// Component controller
class UsersComponent {
newName:string;
names:Array<string>;
constructor() {
}
addName(){
names.push(newName);
newName = "";
}
}
我不确定我的用户组件的语法是否正确。
我的应用模板:
<h1>Hello {{ name }}</h1>
<h2>{{2+2}}</h2>
<hr />
<button (click)="showAlert()">Click to alert</button>
<users></users>
那么如何连接用户组件?
我在控制台中得到的错误:
"Error loading "components/users/component.js" at <unknown>↵Error loading "components/users/component.js" from "app" at http://localhost:8080/app.es6↵Cannot read property 'replace' of undefined"
Angular 日历演示有两个嵌套组件(日历和日历单元格)https://github.com/djsmith42/angular2_calendar.git。据我所见,您的 MyAppComponent 应该从 @Template 的指令列表中引用 Users 组件,如下所示:
@Template({
url: System.baseURL+'app/components/calendar/calendar.html',
directives: [
Foreach,
If,
CalendarCell
]
})
在 Angular2
网站 https://angular.io/docs/ts/latest/tutorial/toh-pt3.html# 的 link 中,您可以看到在 @Components
中添加 directives: [...]
例如:
@Component({
selector: 'my-app',
directives: [UsersComponent]
})
但是 link 在组件内部使用模板,如果您在组件外部使用 @Template({ url:"app.html"})
不知道这是否有效。
您可以查看文件名app.appcomponet.ts
了解更多详情,希望对您有所帮助。
我在 angular.io 上玩过 angular 2 演示。 现在我想创建一个新组件并在我的应用程序中使用它。
我当前的应用:
import {Component, Template, bootstrap} from 'angular2/angular2';
import {UsersComponent} from './components/users/component.js';
// Annotation section
@Component({
selector: 'my-app'
})
@Template({
url:"app.html"
})
// Component controller
class MyAppComponent {
newName:string;
names:Array<string>;
constructor() {
this.name = 'Florian';
}
showAlert(){
alert("It works");
}
addName(){
names.push(newName);
newName = "";
}
}
bootstrap(MyAppComponent);
我的组件:
import {Component, Template, bootstrap} from 'angular2/angular2';
// Annotation section
@Component({
selector: 'users'
})
@Template({
url:"./template.html"
})
// Component controller
class UsersComponent {
newName:string;
names:Array<string>;
constructor() {
}
addName(){
names.push(newName);
newName = "";
}
}
我不确定我的用户组件的语法是否正确。
我的应用模板:
<h1>Hello {{ name }}</h1>
<h2>{{2+2}}</h2>
<hr />
<button (click)="showAlert()">Click to alert</button>
<users></users>
那么如何连接用户组件?
我在控制台中得到的错误:
"Error loading "components/users/component.js" at <unknown>↵Error loading "components/users/component.js" from "app" at http://localhost:8080/app.es6↵Cannot read property 'replace' of undefined"
Angular 日历演示有两个嵌套组件(日历和日历单元格)https://github.com/djsmith42/angular2_calendar.git。据我所见,您的 MyAppComponent 应该从 @Template 的指令列表中引用 Users 组件,如下所示:
@Template({
url: System.baseURL+'app/components/calendar/calendar.html',
directives: [
Foreach,
If,
CalendarCell
]
})
在 Angular2
网站 https://angular.io/docs/ts/latest/tutorial/toh-pt3.html# 的 link 中,您可以看到在 @Components
中添加 directives: [...]
例如:
@Component({
selector: 'my-app',
directives: [UsersComponent]
})
但是 link 在组件内部使用模板,如果您在组件外部使用 @Template({ url:"app.html"})
不知道这是否有效。
您可以查看文件名app.appcomponet.ts
了解更多详情,希望对您有所帮助。