Question

是否可以有条件地绑定到输出属性？这样的事情：<my-Component (myOutputProp)="funcThatReturnsTrueOrFalse()? func1() : func2()"></my-component>

我已尝试过上述示例，以及<my-Component (myOutputProp)="funcThatReturnsFunc1OrFunc2()></my-component>。

我环顾四周，意识到您无法在事后动态更改绑定，无法从EventListeners访问nativeElement，并看到一些有迹象表明你可以通过常规事件绑定来做到这一点，尽管我也无法使用它们。

感谢。

更新

我的输出属性定义如下：

@Output() myOutputProp: EventEmitter<any> = new EventEmitter<any>();

更新2

由于我无法控制的原因，我无法触发一个事件并根据真/假分支。主要是因为在一种情况下，我的三元表达式求值中的false值不会将任何内容绑定到输出属性，我需要能够在我的子组件中检测到（通过myOutputProp.observers.length）

Answer 1

您可以根据布尔值使用EventEmitter emit 。只需通过emit(...)方法推送适当的值。

这是一个包含两个组件的简单示例。一个组件是一个按钮，它会发出一个String值，当您单击该按钮时该值会发生变化。另一个组件正在使用该事件并显示它。您可以在此处找到演示：https://stackblitz.com/edit/angular-4natth

这是第一个组件，它是一个简单的按钮。请注意，单击按钮会设置布尔标志。然后，该标志确定事件发射器发出的字符串。

@Component({
  selector: 'my-example',
  template: '<button mat-raised-button (click)="doThings()">Click me!</button>'
})
export class ExampleComponent {

  @Output()
  status: EventEmitter<string> = new EventEmitter();

  flag = false;

  doThings() {
    this.flag = !this.flag; // toggle the boolean flag
    this.status.emit(this.getValue()); // push the value
  }

  private getValue() {
    if(this.flag) {
      return "Truthy!";
    }
    return "Falsy!";
  }
}

第二个组件正在消耗，而值从(status)发出：

@Component({
  selector: 'my-container',
  template: '<my-example (status)="updateStatus($event)">loading...</my-example><p>Current status: {{status}}</p>'
})
export class ContainerComponent {
  status: string = "Not set yet - click the button!";

  updateStatus(value: string) {
    this.status = value;
  }
}

每当您单击该按钮时，都会调用EventEmitter.emit(...)方法，并推送适当的值。另一方面，事件是使用(status)="updateStatus($event)"消耗的，在这种情况下，$event的类型为字符串，因为我已声明EventEmitter发出字符串。我可以轻松地发出一个布尔值，并使用updateStatus方法根据发出的值执行不同的操作。

所以，比如说你在你的组件中有这个：

@Output()
myOutputProp: EventEmitter<boolean> = new EventEmitter();

然后你可以这样做：

<my-Component (myOutputProp)="someFunc($event)"></my-component>

然后像这样定义你的someFunc：

someFunc(emittedValue: boolean) {
  emittedValue ? func1() : func2();
}

或者，让我们说你需要事件发射器的输出是你需要保留的某种值，而不是布尔值。您仍然可以声明您的组件相同：

<my-Component (myOutputProp)="someFunc($event)"></my-component>

然后像这样定义你的someFunc：

someFunc(emittedValue: any) { 
  funcThatReturnsTrueOrFalse() ? func1(emittedValue) : func2(emittedValue);
}

因此，虽然你可以直接将三元素绑定到事件发射器，但你可以绑定一些静态的东西，它会转向并调用三元本身。

角度2：条件输出属性绑定

1 个答案: