@输出在Angular 10中不发出结果

问题描述

下面是我的代码。
topbar.component.ts

import { Component,OnInit,AfterViewInit,Output,EventEmitter } from '@angular/core';
@Component({
  selector: 'app-topbar',templateUrl: './topbar.component.html',styleUrls: ['./topbar.component.scss'],})
export class TopbarComponent implements OnInit,AfterViewInit {
  @Output() OnCancelss: EventEmitter<any> = new EventEmitter<any>(); //my output parameter
ngOnInit(): void {
  }

  ngAfterViewInit(): void {
  }
}

由结构 topbar.component.ts 给出的

具有用于声明@Output() OnCancelss: EventEmitter<any> = new EventEmitter<any>();的按钮。这是我的HTML页面输出，发出结果。
topbar.component.html

<button class="btn btn-sm btn-default" (click)="OnCancelss.emit('xyzyzyz')">Cancel</button>

我想在这里收信。
layout.component.ts

import {
  Component,ViewChild,ElementRef,} from '@angular/core';

@Component({
  selector: 'app-layout',templateUrl: './layout.component.html',styleUrls: ['./layout.component.scss'],})
export class LayoutComponent implements OnInit,AfterViewInit {
  @ViewChild('ktAside',{ static: true }) ktAside: ElementRef;

  constructor() {
  }

  ngOnInit(): void {
  }

  ngAfterViewInit(): void {
  }

  HideFormLocation(ToShow) {
    alert(ToShow);//here i should be receiving the output as expected
    console.log(ToShow);//here i should be receiving the output as expected
  }
}

这是下面的HTML。
layout.component.html

<app-topbar (OnCancelss)="HideFormLocation($event)"></app-topbar>

我没有得到任何结果。

更新1：

这是下面的图表，各页面之间相互调用。

        |-----layout---|
dynamic menu         header
                       |
                     topbar

我试图访问topbar --> layout，但在两次访问之间是header，所以我使用@Output发射器传递了topbar --> header --> layout的数据，现在我的情况已经改变了，想通过layout --> dynamic menu传递@input传递数据，这是我下面的 layout.component.ts 下面的代码。

ParentLocId: number = 0;
    PassVal2(val:any){
        console.log(val);
        alert(val);
        this.ParentLocId = val;//data is recieved
        console.log(this.ParentLocId);
      }

和下面的 layout.component.html 。

<app-aside-dynamic
          #ktAside
          id="kt_aside"
          class="aside aside-left d-flex flex-column flex-row-auto"
          [ngClass]="asideCSSClasses"
          (OnCancel)="HideFormLocation($event)"
          [LocId]="ParentLocId"
        ></app-aside-dynamic>

这是我的 dynamic.component.ts 。

@Input() LocId: number;
ngOnInit(): void {
console.log(this.LocId); //On page load it returns value 0
}

当我点击 topbar模板中的按钮时，它使用 @输出发射器 topbar --> header --> layout发送数据，但它仍接收数据，但我想将其传递给 @Input 来strong> dynamic.component.ts 。它没有收到值。

解决方法

找到了解决方案，因为我的方向不正确。

        |-----layout---|
dynamic menu         header
                       |
                     topbar

当两者之间有topbar --> layout时直接传递到header中，因此我不得不像这样@Output使用topbar --> header --> layout传递给多个选择器 然后我陷入了layout --> dynamic menu的解决方案如下。

在 layout.component.ts 中。

export class LayoutComponent implements OnInit,AfterViewInit {
@ViewChild('ChildLoadClickId') myChildLoadClickId: ElementRef<HTMLElement>;
ParentLocId: number = 0;
constructor() {}
ngOnInit(): void {}
ngAfterViewInit(): void {}
PassVal2(val:any){   
    this.ParentLocId = val;
    let el: HTMLElement = this.myChildLoadClickId.nativeElement;
    el.click();//it came helpful
  }
PassSwitch(val: any){}
}

在 layout.component.html 中。

<button style="display: none;" #ChildLoadClickId (click)="PassSwitch(ParentLocId);"></button>
<app-aside-dynamic
          #ktAside
          id="kt_aside"
          class="aside aside-left d-flex flex-column flex-row-auto"
          [ngClass]="asideCSSClasses"          
          [LocId]="ParentLocId"
        ></app-aside-dynamic> 

在上面的代码中，即使我将其设置为this.ParentLocId = val;，也不会在接受dynamic menu作为@Input的{​​{1}}上收到，因此唯一的解决方案是使用LocId然后创建一个要以这种方式触发的事件

@ViewChild('ChildLoadClickId') myChildLoadClickId: ElementRef<HTMLElement>;

帮助我获得所需的值。