Angular 基于值显示组件-角度2
我有不同的选项卡显示带组件的功能区。我需要做的是让这些组件在项目未加载(未定义)时隐藏,并在下拉列表中的任何项目加载时显示。为此,我需要从项目id或名称中获取值,然后可以显示其余的功能区组件 如您所见,这是一个包含组件的选项卡:Angular 基于值显示组件-角度2,angular,components,show-hide,Angular,Components,Show Hide,我有不同的选项卡显示带组件的功能区。我需要做的是让这些组件在项目未加载(未定义)时隐藏,并在下拉列表中的任何项目加载时显示。为此,我需要从项目id或名称中获取值,然后可以显示其余的功能区组件 如您所见,这是一个包含组件的选项卡: <div class="tab tab-style"> <ribbon-item style="width:10%;" [title]="'Load/Save Project'"> <project></project
<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.name}
新项目
保存项目
另存为
基本问题是,如何根据id值或组件的数据形式设置其余组件(project.component除外)以显示?我可以使用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(或任何父项目组件)中:
//我想你可以这样绑定。
但是,我建议只使用服务/提供者来存储加载的项目。每次加载项目时都设置该值,并在父组件中使用一个条件来检查服务是否具有加载的项目值 > P>您可以考虑使用选项卡式用户界面的路由而不是嵌套组件。 然后,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>
在APM最终文件夹中。花了一些时间为输入和输出(Angular采用的双向数据绑定)和嵌套组件以及“transclusion”(在另一个组件的内容区域中包含一个组件)的概念整理了一个非常基本的plunk
那是一个砰砰声
突出显示的内容与pezetter描述的完全相同:在发出值的子组件中,您需要使用EventEmitter
和Output
:
// SelectorComponent
@Output() valueSelected: EventEmitter<number> = new EventEmitter();
selectValue(val: number) {
this.valueSelected.emit(val);
}
然后,父级监视该发出的事件
// ParentComponent (template)
<selector design="purple" (valueSelected)="valueChanges($event)"></selector>
// ParentComponent
selectedVal: string;
valueChanges(val: number) {
this.selectedVal = val;
}
或组件内的*ngIf(子级
)
//父组件
//子组件
这当然比理解所需的更深入,但希望有些人能发现玩这个游戏很有用。谢谢,这正是我想要的:)这会解决我的问题,当然很乐意帮助:)你不介意在私下聊天时帮我解决这个问题吗?我有一些具体的相关代码,我需要实现这一点,但我没有完全设法使它工作。我可以给你发文件解释。我相信这对你来说很简单:D@VladimirTomasevicMyNameIsVLT当然可以,请随时给我留言。如果可以在plunk上显示,调试会容易得多,但我可以尽我最大的努力。我对plunk不太熟悉,无法将所有文件设置为工作状态,所以我可以向您发送文件,您会看到,非常简单。让我知道我怎样才能把它们寄给你:)@Jack Koppa
// SelectorComponent
<select #selectorElem (change)="selectValue(selectorElem.value)">
// ParentComponent (template)
<selector design="purple" (valueSelected)="valueChanges($event)"></selector>
// ParentComponent
selectedVal: string;
valueChanges(val: number) {
this.selectedVal = val;
}
// ParentComponent
<alt-child design="gray" *ngIf="selectedVal">
// ParentComponent
<child design="red" [value]="selectedVal" [position]="2">
// ChildComponent
<div [ngClass]="design" *ngIf="value >= position">