Question

我有2个组件：MenuComponent和HeaderComponent。在我的HeaderComponent中，我有一个select，当客户选择一个选项时，我需要在MenuComponent中显示/隐藏div元素。

是否有一个可以帮助我的例子？

这是我的代码：

header.component.html

dtype

header.component.ts

 <div class="select-style">
        <select>
          <option value="" disabled selected> Role </option>
          <option value="admin">Administrator</option>
          <option value="user">Employee</option>
        </select>
  </div>

Answer 1

有多种方法可以解决这个问题，第一种方法也许是最好的方法是创建一个共享服务，将其注入您的根模块（可能是app.module.ts），然后将其注入组件内部。第二个解决方案是，如果您的menu component包含header component，那么您可以使用@Output内的header component装饰器实现相同的功能。既然您没有为我提供足够的代码来向您展示可行的解决方案，我将向您展示这两个示例并解释我们在那里所做的事情：

共享服务方法（如果您的标题组件不在菜单组件内，则为最佳方法）

<强> app.module.ts

...
import { MySharedService } from 'XXXXXXXX';
import { MenuComponent } from 'XXXXXXXX';
import { HeaderComponent} from 'XXXXXXXX';
...
@NgModule({
     ...
     declarations: [
         MenuComponent,
         HeaderComponent,
     ],
     ...
     providers: [
         ...
         MySharedService,
     ]
})

<强> my_shared_service.service.ts

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

/**
 * App service with shared data on global scope of the app
 */
@Injectable()
export class MySharedService {
   /**
    * Currently selected item
    * from header component
    */
    private itemSelected: any = null;

    constructor() {}

    /**
    * Setter for selected item
    */
    public setItem(item: any): void {
        this.itemSelected = item;
    }
}

最后，这就是您的组件可以使用MySharedService：

的方式

<强> header.component.ts

import { MySharedService } from 'XXXXXXX';
...
export class HeaderComponent implements OnInit {
     ...
     constructor(private _mySharedService: MySharedService) { }

     itemSelected(e: any) {
         this._mySharedService.setItem(e.target.value);
     }
     ...
}

<强> header.component.html

<div class="select-style">
    <select name="roles" (change)="itemSelected($event)">
      <option value="" disabled selected> Role </option>
      <option value="admin">Administrator</option>
      <option value="user">Employee</option>
    </select>
</div>

<强> menu.component.ts

import { MySharedService } from 'XXXXXXX';
...
export class MenuComponent implements OnInit {
     ...
     constructor(private _mySharedService: MySharedService) { }
     ...
}

<强> menu.component.html

<div *ngIf="_mySharedService.item">
    Header component has a selected item, show this content.
</div>

如果您的menu component包含header component，那么每次更改值时您都可以Output值，MenuComponent可以监听这些更改并根据收到的结果执行某些任务：

@Output方法（如果菜单组件包含标题组件）

<强> header.component.ts

import { ..., EventEmitter, Output } from '@angular/core';
...
export class HeaderComponent implements OnInit {
     ...
     @Output() onChange: EventEmitter<any> = new EventEmitter<any>();
     ...
     itemSelected(e: any) {
         this.onChange.emit(e.target.value);
     }
     ...
}

<强> header.component.html

<div class="select-style">
    <select name="roles" (change)="itemSelected($event)">
      <option value="" disabled selected> Role </option>
      <option value="admin">Administrator</option>
      <option value="user">Employee</option>
    </select>
</div>

<强> menu.component.html

...
<ca-header (onChange)="itemChanged($event)"></ca-header>
...
<div *ngIf="_item">
    Header component has a selected item, show this content.
</div>

<强> menu.component.ts

...
export class MenuComponent implements OnInit {
     ...
     private _item: any;
     ...
     itemChanged(value: any) {
         this._item = value;
     }
     ...
}

组件之间的双向数据绑定

1 个答案: