Question

我的角度4项目有问题。实际上我想将一个变量发送到我的父组件。我的主要组件有一个可变用户：

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

他的HTML是：

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

而不是路由器插座我有一个子组件，当我调用login（）时会改变用户的值：

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

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

Answer 1

您可以使用angular的依赖注入。

@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发送我的变量

如何将变量发送到父组件

3 个答案: