0
我正在練習angular2(使用離子框架),我在組件之間傳遞數據時遇到困難。angular2:傳遞組件之間的屬性
這是app.component.ts
:
@Component({
template: `
<ion-header>
<ion-toolbar>
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>MyApp</ion-title>
</ion-toolbar>
</ion-header>
<user-menu></user-menu>
<ion-content padding>
<h1>Active User: {{ activeUser }}</h1>
</ion-content>
`
})
export class MyApp {
rootPage = TablePage;
constructor(platform: Platform) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
StatusBar.styleDefault();
Splashscreen.hide();
});
}
}
這是user-menu.component.ts
:
@Component({
selector: 'user-menu',
template: `
<ion-menu [content]="userMenu">
<ion-content>
<ion-row>
<ion-list>
<ion-list-header>
Users
</ion-list-header>
<ion-item *ngFor="let user of users;" menuClose [class.selected]="user === activeUser" (tap)="onSelect(user)">
{{ user.name }}
</ion-item>
</ion-list>
</ion-row>
</ion-content>
</ion-menu>
<ion-nav #userMenu [root]="rootPage"></ion-nav>
`,
styles: [`
.selected {
background-color: #CFD8DC !important;
color: white;
}
`],
providers: [UserService]
})
export class UserMenuComponent {
users: User[];
activeUser: User;
constructor(private userService: UserService) {}
getUsers(): void {
this.userService.getUsers().then(users => this.users = users);
}
ngOnInit(): void {
this.getUsers();
}
onSelect(user: User): void {
this.activeUser = user;
}
}
我怎樣才能activeUser
中的主要成分?在下一步中,我想根據這個用戶顯示相關數據,甚至可能將其傳遞給第三個組件。
謝謝。
Wahh!剛剛發生了什麼?你能解釋一下嗎? – user1692261
您只需引用'UserMenuComponent'實例並可以訪問其屬性 – yurzui
謝謝!如果最好使用模板引用方法並且使用@Output事件方法? – user1692261