Question

我创建了4个组件。他们是 1.Icon组件 2.Toolbar组件 3.设计组件和 4.Tree组件

在图标组件中，我从css导入了大约10个图标，并为其分配了一个值。

在工具栏组件中，我使用图标组件渲染了这10个图标。

在Design和Tree模板中，我使用了工具栏组件，但它将在设计和树页面中显示所有10个图标。我想在设计中只显示一组图标，在树中显示另一组图标。有没有什么办法可以限制工具栏组件中的设计和树中应显示的图标。

Toolbar.component.ts:
import {Component, Input, Output, EventEmitter} from "@angular/core";

@Component({
selector: 'toolbar',
templateUrl: './toolsbar.template.html'
})

export class ToolBar {

@Output() iconClicked: EventEmitter<string> = new EventEmitter<string>();
@Input() page: string;




onClicked(icontype: string): void {
    this.iconClicked.emit(icontype)
}
}

设计Template.html <div class="panel-section"> <div class="row"> <toolbar (iconClicked)="onToolIconClicked($event)" > </toolbar> </div>

Toolabar.template.Html

<div style="float: right">
<tool-icon [id]="'btn-refresh'" [type]="'refresh'" (iconClicked)="onClicked($event)">
<tool-icon>
<tool-icon [id]="'btn-add'" [type]="'add'" (iconClicked)="onClicked($event)">
<tool-icon>
<tool-icon [id]="'btn-edit'" [type]="'edit'" (iconClicked)="onClicked($event)">
<tool-icon>
<tool-icon [id]="'btn-delete'" [type]="'delete'" (iconClicked)="onClicked($event)">
<tool-icon>
<tool-icon [id]="'btn-import'" [type]="'import'" (iconClicked)="onClicked($event)">
<tool-icon>

<tool-icon [id]="'btn-collapse'" [type]="'collapse'" (iconClicked)="onClicked($event)">
<tool-icon>
<tool-icon [id]="'btn-expandall'" [type]="'expandall'" (iconClicked)="onClicked($event)">
<-tool-icon>
<tool-icon [id]="'btn-expanddiff'" [type]="'expanddiff'" (iconClicked)="onClicked($event)">
<tool-icon>
<tool-icon [id]="'btn-selectall'" [type]="'selectall'" (iconClicked)="onClicked($event)">
<tool-icon>
<tool-icon [id]="'btn-selectnone'" [type]="'selectnone'" (iconClicked)="onClicked($event)">
<tool-icon>
 tool-icon [id]="'btn-selectdiff'" [type]="'selectdiff'" (iconClicked)="onClicked($event)">
<tool-icon>

但我只想在设计页面中渲染任何2个图标。请提供一些建议

Answer 1

在角度2中，传递从子组件到父组件的变量通过具有输出属性的事件和实现模式可观察模式的EventEmitter来使用。

您声明输出属性的子组件中的示例

@Output() onProductSelected: EventEmitter<any>;

并在模板中的父组件中

<child-product (onProductSelected)=setProduct($event)></child-product>

其中$ event是您要传递给父组件的值

如何将变量从子组件模板传递给angular2中的父组件？

1 个答案: