我有一个<navbar>
组件,其中有一个名为makeSelected
的方法,正如其名称所示,可以使项目被选中。这在点击项目时非常有效,但是在我的主页上,我希望它能够在不点击它的情况下被选中。
我已将Navbar组件注入到我的Home组件中,并在Home构造函数中调用了makeSelected
方法:
import {Component, View} from 'angular2/core';
import {Navbar} from '/app/navbar/navbar';
@Component({
selector: 'home',
providers: [Navbar]
})
@View({
templateUrl: '/app/home/home.html',
directives: [Navbar]
})
export class Home {
constructor(public navbar : Navbar) {
this.navbar = navbar;
this.navbar.makeSelected('Item 1');
}
}
导航栏组件:
import {Component, View} from 'angular2/core';
@Component({
selector: 'navbar'
})
@View({
template: `
<ul>
<li *ngFor="#item of items; #i = index" (click)="makeSelected(item.name)">
{{ item.name }} <div *ngIf=" item.selected == true"> [selected] </div>
</li>
</ul>
`
})
export class Navbar{
constructor(){
this.items = [
{id: 1, name: 'Item 1', href: 'http://www.google.com', selected: false}
]
}
makeSelected(name)
{
for(var i in this.items)
{
this.items[i].selected = false;
if(this.items[i].name == name)
{
this.items[i].selected = true;
}
}
}
}
页面显示正常,但是项目没有被选中。没有错误提示,似乎方法已经被调用。
为什么项目没有被选中呢?