@output 不在 Angular 10 中发出结果

Question

下面是我的代码。
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,
  OnInit,
  ViewChild,
  ElementRef,
  AfterViewInit,
} 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 的数据现在我的场景已经工作了改变了我想通过@input传递layout --> dynamic menu传递数据这是我下面的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 模板 单击按钮时，它使用 @output emitter 发送数据 topbar --> header --> layout 它接收数据但进一步我想使用 @Input 将其传递给 dynamic.component.ts。它没有收到值。

Answer 1

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

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

当中间有 header 时直接传递给 topbar --> layout 所以我不得不像这样使用 @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 接受 @Input 作为 LocId 所以唯一的解决方案它使用 @ViewChild('ChildLoadClickId') myChildLoadClickId: ElementRef<HTMLElement>; 然后创建一个像这样触发的事件

let el: HTMLElement = this.myChildLoadClickId.nativeElement;
        el.click();

帮我得到了想要的值。

@output 不在 Angular 10 中发出结果

@output not emitting result in Angular 10

typescript

angular

angular10