基于值显示组件 - Angular 2
我有不同的选项卡,显示带有组件的功能区。我需要做的是在项目未加载(未定义)时隐藏这些组件,并显示下拉列表中的任何项目何时加载。为此,我需要从项目ID或名称中获取值,然后可以显示其余的色带组件。基于值显示组件 - Angular 2
正如你所看到的,这是与部件标签之一:
<div class="tab tab-style">
<ribbon-item style="width:10%;" [title]="'Load/Save Project'">
<project></project>
</ribbon-item>
<div class="ribbon-divider"></div>
<ribbon-item style="width:12%;" [title]="'Project settings'">
<project-settings></project-settings>
</ribbon-item>
<div class="ribbon-divider"></div>
<ribbon-item style="width:23%;" [title]="'Environment'">
<environment></environment>
</ribbon-item>
<div class="ribbon-divider"></div>
<ribbon-item class="pd-width" [title]="'Project dates'">
<project-dates></project-dates>
</ribbon-item>
<div class="ribbon-divider"></div>
这是从该选项卡项目组成部分已project.id:
<div class="button-wrapper">
<select #projectSelect class="custom-select custom-select-project" (change)="loadProject(projectSelect.value)">
<option selected disabled>Open projects</option>
<option *ngFor="let project of projects" [value]=project.id>{{project.name}}</option>
</select>
<button class="btn-main" (click)="createNewProject()">New project</button>
<button class="btn-main">Save project</button>
<button class="btn-main">Save as</button>
基本问题是,我如何设置其余的组件(project.component除外)? o根据id值或数据表单显示该组件?我可以使用ngIf或类似的东西吗?感谢您的帮助
花费了一些时间为输入和输出(Angular使用的双向数据绑定),嵌套组件以及“transclusion”(包括一个另一个组件的内容区域内的组件)。
该plunk是here。
亮点是完全一样pezetter描述:在真实发光值的子组件,您需要使用EventEmitter
和Output
:
// SelectorComponent
@Output() valueSelected: EventEmitter<number> = new EventEmitter();
selectValue(val: number) {
this.valueSelected.emit(val);
}
这将在(change)
事件您<select>
组件的调用。
// SelectorComponent
<select #selectorElem (change)="selectValue(selectorElem.value)">
然后父为发射事件手表
最后,你只需要你的组件将被隐藏或显示基于已输出的值(向上传递到这样做父母)。在普拉克,有2种不同的方式做到这一点:一个* ngIf组件本身(alt-child
)上:成分(child
)
// ParentComponent
<child design="red" [value]="selectedVal" [position]="2">
// ChildComponent
<div [ngClass]="design" *ngIf="value >= position">
内
// ParentComponent
<alt-child design="gray" *ngIf="selectedVal">
或* ngIf这所有这些都必须比理解需要更深入,但希望有些人可以找到有用的东西。
将@Output添加到项目组件。然后,发出一个包含您的项目值的事件,该事件将使用ngIf或类似的东西启用其他组件。
在你project.component.ts:
@Output() setProjectValue = new EventEmitter();
loadProject(val){
let foundProject;
//Load project logic here...
foundProject == ...; // once its done:
this.setProjectValue.emit(foundProject); //This will output to your parent component.
}
在你app.component.html(或任何家长要项目部分):
<project (setProjectValue)="project = $event;"></project> //I think you're allowed to bind like this.
不过,我会建议刚使用服务/提供者来存储加载的项目。每次加载项目时设置该值,并使用该父组件中的条件来检查该服务是否具有加载的项目值。
您可以考虑为选项卡式用户界面使用路由而不是嵌套组件。
产生的HTML代码则是这个样子:
<div class="panel-body">
<div class="wizard">
<a [routerLink]="['info']" routerLinkActive="active">
Basic Information <span [ngClass]="{'glyphicon glyphicon-exclamation-sign':
!isValid('info')}"></span>
</a>
<a [routerLink]="['tags']" routerLinkActive="active">
Search Tags <span [ngClass]="{'glyphicon glyphicon-exclamation-sign':
!isValid('tags')}"></span>
</a>
</div>
<router-outlet></router-outlet>
</div>
基本上有标签和路由器的出口。
然后,您可以使用路由参数轻松地将数据传递到不同的路由。
我在这里有一个完整的例子:https://github.com/DeborahK/Angular-Routing在APM-Final文件夹中。
谢谢,就是我一直在寻找:)这将解决我的问题肯定 –
很高兴帮助:) –
你不会介意帮助我这个私人聊天吗?我有一些特定的相关代码,我需要实现这一点,但我并没有设法使其工作。我可以给你发送文件并解释。我相信这对你很简单:D –