基於值顯示組件 - 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或類似的東西嗎？感謝您的幫助

來源

2017-09-15 Vladimir Tomasevic MyNameIsVLT

花費了一些時間爲輸入和輸出（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這所有這些都必須比理解需要更深入，但希望有些人可以找到有用的東西。

來源

2017-09-15 17:02:51

謝謝，就是我一直在尋找:)這將解決我的問題肯定 –

很高興幫助:) –

你不會介意幫助我這個私人聊天嗎？我有一些特定的相關代碼，我需要實現這一點，但我並沒有設法使其工作。我可以給你發送文件並解釋。我相信這對你很簡單：D –

將@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.

不過，我會建議剛使用服務/提供者來存儲加載的項目。每次加載項目時設置該值，並使用該父組件中的條件來檢查該服務是否具有加載的項目值。

來源

2017-09-15 15:55:15 Everett

您可以考慮爲選項卡式用戶界面使用路由而不是嵌套組件。

產生的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文件夾中。

來源

2017-09-15 16:51:20 DeborahK

基於值顯示組件 - Angular 2

回答

相關問題