変数を親コンポーネントに送信する方法

Question

私の4番目のプロジェクトに問題があります。

export class AppComponent { 
    public user: User = null; 
} 

彼のHTMLは次のとおりです： 私の主なコンポーネントは、変数のユーザーを持っている

{{user.name}} 
<router-outlet></router-outlet> 

代わりにルータ-コンセントの私は、ユーザーの値を変更する子要素を持っている私は）（ログインを呼び出すとき：

export class ChildrenComponent { 
    login() { 
    user.name = 'Toto'; 
    } 
} 

ここで、userの値を親コンポーネントに送信します。

可能でしょうか？

ありがとうございます！

Answer 1

角度の依存性注入を使用できます。

@Component() { 
    .... 
} 
export class Parent { 
    public user: User; 
    .... 
} 

@Component() { 
.... 
} 
export class Child { 
    constructor(public parent: Parent) { 
    } 

    someAction() { 
    this.parent.user = user; 
    } 
} 

親と子はあなたのコンポーネント名（例えば、MainContainerとLoginComponent）に置き換える必要があり、シンボリック名です。また、別の場所で使用するとコンポーネントが失敗しないように、親をオプションにすることを検討することもできます。

これは通常のネストでは機能しますが、アウトレットで動作することを確認する必要があります。

また、親メンバーを入力として価値の変更をレンダリングするようにすることも考えられます。

Answer 2

ユーザーが変更した親コンポーネントを放出するためにEventEmmiterを使用する必要があります。例えば、イベントでデータを送信することができます。

あなたの親コンポーネントテンプレート：

<your-child-component (selectedUser)="selectUser($event)"></your-child-component> 

あなたParentComponent：

export class ParentComponent { 
    user: any; 

    selectUser(user) { 
    this.user= user; 
    } 
} 

あなたChildComponent：

export class ChildComponent{ 
    user: any; 

    @Output() selectUser = new EventEmitter<any>(); 

    onSelectUser(user: any) { 
    this.selectUser.emit(user); 
    } 
} 

あなたが良い例を見つけることができますthere

Answer 3

ありがとうMeirあなたの解決策は良いです！ 他の人にとっては良い解決策ですが、ルータコンセントを使用するとEventEmitterを使用して変数を送信することはできません