Question

我的项目结构如下

$ awk 'BEGIN{ FS=OFS="," } NR>1{ if(gsub(/\\,/,"\n")) for(i=1;i<=NF;++i) gsub(/\n/,"\\,",$i); print $2,$3 }' file
science\,social,football
painting,tennis\,ping_pong\,chess

在标头文件夹中，我有html，css和ts文件。在ts文件中，我有一个变量要发送给父对象（app.component.ts）

我的“标题” ts文件发射器代码如下

src
  -> app
        -> ui
             ->header
             ->layout
             ui.module.js
    app.component.css
    app.component.html
    app.component.ts
    app.module.ts

我的“标头” html文件发射器代码如下

@Output() highlightedMenu1 = new EventEmitter<string>();


somemthod(s : string){ //this some method will be called on click event from "header" html
    this.highlightedMenu1.emit('hi'); //wanted to emit this variable to app.component.ts
}

“ ui.module.js”导出了“标头”和“布局”。

在app.component.ts中

声明了如下所示的方法

期望此方法被调用。来自“ header” html，但未调用，而是在我的“ layout”模块发射器中正常运行此方法。

(highlightedMenu1)="getMenuBarSelected($event)"

“ app.module.ts”我已经导入了“ UiModule”

Answer 1

@Output允许父级订阅在其子级中声明的EventEmitter。

如果header.component.ts具有highlightedMenu1

@Output() highlightedMenu1 = new EventEmitter<string>();


somemthod(s : string){ //this some method will be called on click event from "header" html
    this.highlightedMenu1.emit('hi'); //wanted to emit this variable to app.component.ts
}

Header.component.html不能具有以下内容，因为它属于同一组件：

(highlightedMenu1)="getMenuBarSelected($event)"//wrong

相反，某些父组件可以具有以下内容：

layout.component.html

<app-header (highlightedMenu1)="getMenuBarSelected($event)"></app-header>//right

假设getMenuBarSelected是在layout.component.ts内部定义的

编辑：

@Output事件不会像click事件等那样冒泡。因此，祖父母无法知道孙子是否触发了事件。但是，您可以在直接父级内部创建另一个@output事件，以便祖父母可以收听。

假设：

app.component（祖父母）-> layout.component（父）-> header.component（子）

除了上面的代码，您还需要： layout.component.ts

@Output() highlightedMenu1 = new EventEmitter<string>();

layout.component.html

<app-header (highlightedMenu1)="highlightedMenu1.emit($event)"></app-header>

app.component.html

<app-layout (highlightedMenu1)="myMethod($event)"></app-layout>

另一种简单的方法是拥有一些EventService。 EventService.ts

static highlightedMenu1 = new EventEmitter<string>();

和 header.component.ts

中

   myMethod(){
       EventService.highlightedMenu1.emit('hi');
   }

和 app.component.ts

中

EventService.highlightedMenu1.subscribe(data => console.log(data));

Stackblitz

Angular 6-从子模块到父模块的事件发射器

1 个答案: