Question

我有三个组件，分别是Dashboard，Widget和Workspace组件。我在其他两个中重用了小部件组件。从仪表板组件中重用它时，我必须显示来自DB的原始数据的小部件组件，而从工作区组件中重用它时，我需要显示虚拟数据。为了实现上述情况，我分配了一个名为dummyData的布尔变量，并在WidgetComponent中将其默认设置为false。

public dummyData : boolean = false;

ngOnInit(){
  if(!this.dummyData){
    // orginal data
  }else{
    // dummy data
  }

现在，在其他地方重用此组件时，我需要传递一个布尔参数。

如何在重用参数时将参数传递给组件？

Answer 1

您可以在Widget组件中使用Input（）指令，并将状态传递到您想使用它的任何位置。

小部件组件

@Input（）stateData：布尔值；

在您的选择器声明中

请参阅组件交互部分 https://angular.io/guide/component-interaction

Answer 2

在属性上使用输入修饰符。

@Input()
dummyData = false;

并将其设置为true

<widget [dummyData]="true"></widget>

在Angular 7中重用参数时如何将其传递给其他组件

2 个答案: