从 Angular 组件中移除 Output 属性值

Question

我认为实验源于我有时需要为我的 Angular 组件的输出添加和删除函数的情况。 这是例子

父组件将只包含子组件<my-component>的输出函数。

父组件

class ParentComponent{
  myOutputFunction = null;

  setOutputFunction() {
    this.myOutputFunction = () => {
      // do something
    };
  }

  removeOutputFunction() {
    this.myOutputFunction = null;
  }
}

父组件模板

<my-component (someOutput)="myOutputFunction($event)"><my-component>

子组件MyComponent 内部将有输出someOutput。这也将作为一个问题，如何检测父母何时决定执行removeOutputFunction() 并可能订阅该事件并对其做出反应。

MyComponent 子组件

class MyComponent {
  @Output() someOutput = new EventEmitter();

  ngOnInit(): void {
    // At this point we can see if there are any observers to someOutput
    if(this.someOutput.observers.length > 0) {
      console.log('YEY we have a set output method from ParentComponent to MyComponent`s attribute');
    } else {
      console.log('We have no attribute defined');
    }
  }
}

在ngOnInit() 中，我们可以检查我们是否已编码(someOutput)="myOutputFunction($event)"。

所以，结论。 有没有办法监听（订阅）将 someOutput 从父级从 () => // do something 值更改为 null 值。

当我登录 this.someOutput.observers 时，我得到了订阅者数组。 我可以以某种方式使用this.someOutput 作为 EventEmitter 来到达该实验所指向的位置吗？

谢谢

Answer 1

你不能动态删除输出属性，但我认为这个解决方案可以帮助你。

如果你想设置从父到子的值，你应该在子组件中使用@Input。

@Output 用于从孩子通知父母。

解决方案 1

如果您希望子组件仅在父组件有函数时发出值，请在有人在听时告诉子组件。

假设您发出的值的类型为string

子组件

class MyComponent {
  @Output() someOutput: EventEmitter<string> = new EventEmitter();
  @Input() isParentListening = false;

  ngOnInit(): void {
    if (this.isParentListening) {
      // Parent wants to receive data
      this.someOutput.emit("Yay! Parent is listening");
    } else {
      // Parent is not listening
      console.log("My parent doesn't take care of me :(");
    }
  }
}

父组件

<my-component
  [isParentListening]="listenChildComponent"
  (someOutput)="myOutputFunction($event)"
></my-component>

class ParentComponent {
  listenChildComponent = true;

  myOutputFunction = (value: string) => {
    // do something
  };
}

解决方案 2

另一种解决方案是保持子组件干净且不知道此逻辑，由父组件决定是否必须做某事。

子组件

class MyComponent {
  @Output() someOutput: EventEmitter<string> = new EventEmitter();

  ngOnInit(): void {
    // Output always as if someone were listening
    this.someOutput.emit("Yay! Someone is listening (I hope)");
  }
}

父组件

当该输出事件发生时，父级根本不执行任何逻辑。

<my-component (someOutput)="()=>{}"></my-component>

class ParentComponent {}

Answer 2

一旦您使用模板，您就无法通过查看观察者的数量来推断任何东西。即使你这样做了：

<my-component (someOutput)="myOutputFunction"><my-component>

myOutputFunction 为空，观察者的数量仍为 1。

您可以通过使用ViewChild 有条件地设置观察者的编程方法来部分实现（不建议的方法，请参阅下面的原因*）：

@ViewChild(MyComponent, { static: true }) comp: MyComponent;

  myOutputFunction = null;

  setOutputFunction() {
    this.myOutputFunction = () => {
      console.log('something');
    };
    this.comp.someOutput.subscribe(this.myOutputFunction);
  }

查看演示：https://stackblitz.com/edit/angular-output-programmatic

但是，恕我直言，您以错误的方式处理此问题。如果有人在听，您似乎希望子组件（有条件地）产生一些结果。

• 使用 EventEmitter 推断这是错误的；如果您希望子组件中的行为依赖于 myOutputFunction，请将 @Input() 传递给子组件 - 最简单，传递 myOutputFunction 本身并让子组件调用它。或者：
• 一般来说，这听起来像是一个可观察对象的用例：如果（且仅当）有人订阅了它，就应该产生一些东西。消费者是父母，生产者是孩子。接受救援。
• 这样的模式听起来与组件无关；考虑将 observable/subject 放在服务中。

您可能已经意识到这一切，所以我将其保留在：不，不要将逻辑基于 EventEmitter 的观察者。 *即使你采用程序化方法，你也破坏了一些基本的抽象；正确使用子组件以及子组件的行为需要消费者对子组件逻辑有复杂的了解。

Answer 3

为什么不使用输入法？

class MyComponent {
  @Input() func = null;

  ngOnInit(): void {
    if (func)
       func();
    else
       console.log("I'm child")
  }
}

在你的父母中

   <app-child [func]="functionInParent"></app-child>

   functionInParent()
   {
         console.log("function in parent") 
   }

   //OR
   <app-child></app-child>

Answer 4

这是一个非常有趣的想法。 但只是为了确保您在正确的时间得到它，您应该收听“newListener”事件并在那里执行您的逻辑。检查此链接作为参考https://nodejs.org/api/events.html#events_event_newlistener

....
this.someOutput.once('newListener', (event, listener) => {
    ... // you have a listener
})

...