不可能在同一组件中使用 2 个发射器

Question

我在组件之间共享数据并为此使用发射器。 我在 MenuComponent 模板 html 中渲染“

菜单组件

//if i add , then app crash
<app-login (sendFromLogin)="logIn($event)"></app-login>
<app-menu-login (sendFromLogin)="logIn($event)" (sendFromMenuLogin)="Logoff($event)" ></app-menu-login>


@Component({
    selector:'app-menu',
    templateUrl:'./menu.component.html'
})
export class MenuComponent implements OnInit ,AfterViewInit,OnDestroy {



    constructor( private apiService:CheatService,
        private router:Router,private sharedService:SharedService
        ) 
   {

         
    }
    ngAfterViewInit(): void {

    }


    ngOnInit(): void {
 
    }

     //here is called
    Logoff(event:UserFlag)
    {
      //do sttuf
    }
    
    //mever is called
    logIn(data:UserFlag)
    {
         //do sttuf
    }


}

在我的另一个组件中

MenuLoginComponent:

    <li 
        <a (click)="logout()">Log Out</a>
    </li>

@Component({
 selector:'app-menu-login',
 templateUrl:'./menu-login.component.html',
 styleUrls:['./menu-login.component.css']
})
export class MenuLoginComponent implements OnInit{


    @Input()
    sendFromMenuLogin = new EventEmitter<any>();

    @Output()
    sendData1= new EventEmitter<any>();

    constructor(private apiService:CheatService,
        private router:Router,private sharedService:SharedService) {}

    ngOnInit(): void {

    }


    logout()
    {
      this.sendFromMenuLogin.emit(this.sendData1);
    }

然后在我的另一个组件中 登录组件：

<button (click)="login">Login</button>

@Component({
    selector:'app-login',
    templateUrl:'./login.component.html'
})

export class LoginComponent implements OnInit{


    @Input()
    sendFromLogin = new EventEmitter<any>();

    @Output()
    sendData2 = new EventEmitter<any>();

    constructor(private fb: FormBuilder,
        private router: Router,) {
    

    }

    ngOnInit(): void {
        

    }

    ngAfterViewInit(): void {

    }

    login()
    {
      this.sendFromLogin.emit(this.sendData2);
    }


}

Answer 1

所以您有 2 个子组件，每个子组件都有 1 个发射器，但在您的 MenuComponent 中，您只调用第一个组件，并且以某种方式从两个子组件的事件发射器中侦听。它行不通。 你需要这样的东西：

<app-login (sendData2)="logIn($event)"></app-menu-login>
<app-menu-login (sendData1)="Logoff($event)" (sendData2)="logIn($event)"></app-menu-login>

我假设第一个“登录”组件称为 appLogin，并在同一个主组件中实例化。

如果主组件调用 menuLogin 作为子组件，而调用 login 作为子组件，那么您必须手动侦听 menuLogin 模板中的 sendData2 并在接收到此事件时在 menuLogin 中发出。您可以在其工作的整个链中保持相同的名称。并且不要使用 sendData1 使用明确的名称，例如 (login)

添加新信息后进行编辑：

1. 首先不要将@Input() 放在事件发射器之前。 @Input() 是在子节点中接收父节点的数据，而事件发射器是从父节点向子节点发送数据。
2. 我仍然需要所有组件的 html 模板代码来了解哪个组件被哪个组件调用。
3. 注意你的变量名，正确的语法是：

在你的父组件html代码中：

<app-child 
   (nameOfTheEventEmitterInChild)="functionThatReceiveDataFromChildInParent($event)">
</app-child>

在你的孩子ts代码中：

// declare the oupput
@Output() nameOfTheEventEmitterInChild = new EventEmitter<any>();

// send something to it
somethingHappenedAndParentShoudNow(something: any):void {
    this.nameOfTheEventEmitterInChild.emit(something)
}

在你的父组件 ts 代码中。

// function that receive the output of the child component
functionThatReceiveDataFromChildInParent(something: any): void {
    console.log(something)
    # do something.
}

删除代码中的所有发送数据发射器，删除 @Input() 并在 sendFromMenuLogin 和 sendFromLogin 之前替换为 @Output()，更改子组件中的函数，以便它们调用 this.sendFromMenuLogin.emit() 而不是 this.sendDataN.emit()你应该接近解决方案