Angular @输出不发射导致角度10

下面是我的代码。
顶栏.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 {
  }
}

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

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

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 {
  }
}

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

我试图访问

顶栏-->布局

，但中间是

标题

，因此我使用

@Output

发射器从

顶栏-->标题-->布局

传递数据，现在有效。我的场景已更改。我想通过

@input

传递数据。这是我的代码下面是布局.component.ts的部分。

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

<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>

以及下面我的布局.component.html。

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

<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。它没有收到值。

找到了我的解决方案，因为我走错了方向。

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

当中间有

标题

时，直接传递到

顶栏-->布局

，因此我必须像这样使用

@Output

传递到多个选择器

顶栏-->标题-->布局

然后我被困在

布局-->动态菜单上

我得到的解决方案如下。

在布局.component.ts中

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

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){}
}

<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> 

---

帮助我获得所需的值。

我认为您的逻辑不正确。通常，输出发射器将从父组件发射到子组件。父组件是topbar.component.html，子组件是layout.component.html。在这种情况下，必须将输出从父对象发送到子对象。例如：HideFormLocation（ToShow）{alert（ToShow）；//这里我应该按预期的方式接收console.log（ToShow）；//这里我应该按预期的方式接收OnCancelss.emit（'xyzyz'）；}@Muthupriya我的layout.component.html是parent，topbar.component.html是child抱歉我的错误。我在stackblitz中尝试过你的场景。无论您做了什么都是正确的，我唯一改变的是我从topbar组件模板文件中删除了button类。请检查一下@纳曼Kumar@Muthupriya它在你的stackblitz上运行得很好，但是我的代码仍然不起作用，我尝试使用（@）输入，但没有一个对我有效。。我不知道是什么问题。你能在stackblitz中更新你的代码吗？这样我们就可以调试它了。@纳曼·库马尔