Ich praktiziere angular2 (mit ionischen Rahmen) und ich habe Schwierigkeiten mit der Weitergabe von Daten zwischen den Komponenten.angular2: Übergabe der Eigenschaft zwischen den Komponenten
Dies ist 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();
});
}
}
Dies ist 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;
}
}
Wie kann ich activeUser
in der Hauptkomponente? Im nächsten Schritt möchte ich relevante Daten entsprechend diesem Benutzer anzeigen und eventuell sogar an eine dritte Komponente weitergeben.
Danke.
Wahh! Was ist gerade passiert? Kannst du bitte erklären? – user1692261
Sie erhalten nur einen Verweis auf 'UserMenuComponent' Instanz und können Zugriff auf seine Eigenschaften haben – yurzui
Danke! Wann ist es besser, die Vorlagenreferenzmethode zu verwenden und wenn die @Output-Ereignismethode? – user1692261