angular2：コンポーネント間でプロパティを渡します。

Question

私は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を取得できますか？次のステップでは、このユーザーに応じて関連するデータを表示し、それを第3のコンポーネントに渡すこともできます。

ありがとうございました。

Answer 1

1）テンプレートの参照があなた

<user-menu #menu></user-menu> 

{{ menu.activeUser }} 

も参照してください

• Parent interacts with child via local variable

2）もう一つの方法は、UserMenuComponent

export class UserMenuComponent { 
    @Output() onSelected = new EventEmitter(); 

    onSelect(user: User): void { 
    this.activeUser = user; 
    this.onSelected.emit(user); 
    } 

に@outputイベントをしているために働くmigh

と親テンプレート

<user-menu (onSelected)="activeUser = $event"></user-menu> 

も参照してください

• Parent listens for child event