如何向父组件发送变量

问题描述：

我的angular 4项目存在问题。我的主要成分具有可变用户：如何向父组件发送变量

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

他的HTML是：

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

相反路由器出口的我有一个孩子组件，它改变了用户的值当我打电话登录（）：

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

现在我想将用户的值发送给父组件。

有可能吗？

谢谢！

访问：https：//angular.io/guide/component-interaction#parent-listens-for-child-事件 –

事件发射器，服务，执行此操作的几种不同方法：https://angular.io/guide/component-interaction#parent-listens-for-child-event –

事件发射器在处理路由器插座时可能不起作用，你现在有了制定具体约束的方法。 – Meir

答

您可以使用角度的依赖注入。

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

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

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

父和子是符号名称，您应该替换为您的组件名称（例如，MainContainer和LoginComponent）。另外，您可能需要考虑使父项可选，以便您的组件在其他位置使用时不会失败。

请注意，这在正常嵌套工作，你必须检查它与网点的作品。

您可能还想考虑让父成员作为输入，以便在值更改时触发呈现。

答

您需要使用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

答

谢谢你喵你的解决方案是好的！对于其他人，这是一个很好的解决方案，但与路由器插座我不能使用EventEmitter发送我的变量

顺便说一句，服务解决方案也可能是一个好方法。父母/孩子可以工作，但对于诸如选项卡之类的事物来说，当涉及到用户，应用程序的广泛价值，服务听起来更好时 – Meir

如何向父组件发送变量

相关推荐