Question

假设我有一个componentA和一个componentB

@Component({
  selector: 'appA',
  templateUrl: './appA.html',
  styleUrls: ['./appA.css']
})
export class componentA{
  constructor(private route: Router) { } 
  moveFront() {
    this.route.navigateByUrl('componentB');
  }
}

@Component({
  selector: 'appB',
  templateUrl: './appB.html',
  styleUrls: ['./appB.css']
})
export class componentB{
  constructor(private route: Router) { } 
  moveBack() {
    this.route.navigateByUrl('componentA');
  }
}

现在当我调用moveFront（）函数时，componentB被调用但我想将一些数据传递给组件，我该怎么做？

我的组件都是子组件，我想将数据传输到一个子组件和从另一个子组件传输数据。我怎么能这样做。

Answer 1

要在Angular中传递数据，您可以使用 @Input将数据从父级传递给子级 @Output将数据从子级传递到父级

要在兄弟组件之间传递数据，您需要传递父组件，或者需要使用服务https://angular.io/guide/component-interaction#parent-interacts-with-child-via-local-variable

Answer 2

另一个选项（如果您只发送字符串值）是使用Route params。与查询参数类似，它有一些看起来非常粗糙的URL的潜力，但它是一个选项。首先，您将注入ActivatedRoute：

constructor(private router: Router, private route:ActivatedRoute) { }

您可以使用router.navigate代替：

this.router.navigate(['componentB', {myVar:'myValue'}]);

然后在您的组件中，订阅路线参数：

ngOnInit() {
  this.route.params.subscribe((data) => {
    this.myVar = data.myVar || 'defaultValue';
  });
}

同样，这只适用于字符串。 Angular在使用此方法传递的任何Object上调用.toString()。如果您想要发送更复杂的数据，则应使用服务/商店。

如何将数据从一个子组件传递到angular2中的另一个子组件？

2 个答案: