代码之家 › 专栏 › 技术社区 › John Theoden

基于值显示组件-角度2

show-hide components angular

John Theoden · 技术社区 · 7 年前

如您所见,这是一个包含组件的选项卡:

<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>

这是这个选项卡中包含项目的项目组件。身份证件:

<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>

3 回复 | 直到 7 年前

Jack Koppa 7 年前

花了一些时间为输入和输出(Angular采用的双向数据绑定)的概念整合了一个非常基本的插件,包括嵌套组件和“转换”(在另一个组件的内容区域中包含一个组件)。

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)">

// ParentComponent (template)
<selector design="purple" (valueSelected)="valueChanges($event)"></selector>

// ParentComponent
selectedVal: string;    
valueChanges(val: number) {
    this.selectedVal = val;
}

最后,您只需要根据输出的值(传递给父对象)隐藏或显示组件即可。在plunk中,有两种不同的方法来实现这一点:组件本身上的*ngIf( alt-child

// ParentComponent    
<alt-child design="gray" *ngIf="selectedVal">

或组件内的*ngIf( child )

// ParentComponent
<child design="red" [value]="selectedVal" [position]="2">

// ChildComponent
<div [ngClass]="design" *ngIf="value >= position">

这当然比理解需要更深入,但希望一些人能发现玩这个plunk有用。

Pezetter 7 年前

在您的项目中。组成部分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.
}

在你的应用程序中。组成部分html(或项目组件的父对象):

<project (setProjectValue)="project = $event;"></project> //I think you're allowed to bind like this.

DeborahK 7 年前

您可以考虑在选项卡式用户界面中使用路由而不是嵌套组件。

然后,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文件夹中。