我有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>
答案 0 :(得分:0)
有多种方法可以解决这个问题,第一种方法也许是最好的方法是创建一个共享服务,将其注入您的根模块(可能是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;
}
...
}