값을 기준으로 구성 요소 표시 - 각도 2

Question

구성 요소가있는 리본을 보여주는 다른 탭이 있습니다. 내가해야할 일은 프로젝트가로드되지 않았을 때 숨기고 (정의되지 않은) 이러한 컴포넌트를 가져오고 드롭 다운 목록의 프로젝트가로드 될 때 표시하는 것입니다. 이를 위해서는 프로젝트 ID 또는 이름에서 값을 가져와 나머지 리본 구성 요소를 표시해야합니다.

당신이 볼 수 있듯이,이 구성 요소 탭 중 하나입니다

<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 제외) t o id 값 또는 데이터 형식을 기반으로 구성 요소를 표시합니까? ngIf 또는 이와 비슷한 것을 사용할 수 있습니까? 도움을 주셔서 감사합니다

Answer 1

입력 및 출력 (Angular에서 사용하는 양방향 데이터 바인딩), 중첩 구성 요소 및 "중계"(여기에는 다른 컴포넌트의 컨텐츠 영역 내의 컴포넌트).

그 plunk는 here입니다.

하이라이트는 정확히 같은 pezetter 설명 : 값을 방출있어 아이 컴퍼넌트에 사용하려는 것이다 EventEmitter 및 Output : 당신의 <select> 구성 요소의 (change) 이벤트에서 호출됩니다

// SelectorComponent 
@Output() valueSelected: EventEmitter<number> = new EventEmitter(); 
selectValue(val: number) { 
    this.valueSelected.emit(val); 
} 

.

// 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; 
} 

마지막으로 그 방출 이벤트를 감시

, 당신은 숨기거나까지 통과 출력 된 값 (에 따라 그렇게 보여주는 것입니다 귀하의 구성 요소가 필요합니다 부모). *가 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이있는 쿵하는 소리에,이 작업이 2 개 가지 방법이 있습니다 이해하기 위해 필요한 것보다 확실히 더 심층적 인 것이지만, 그 중 일부는 유용 할 수 있습니다.

Answer 2

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

을하지만, 난 그냥 추천 로드 된 프로젝트를 저장하기 위해 서비스/공급자를 사용합니다. 프로젝트가로드 될 때마다이 값을 설정하고 서비스에로드 된 프로젝트 값이 있는지 확인하는 해당 상위 구성 요소의 조건을 사용하십시오.

Answer 3

탭이있는 사용자 인터페이스에 중첩 된 구성 요소 대신 라우팅을 사용할 수 있습니다.

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-Final 폴더에 https://github.com/DeborahK/Angular-Routing입니다.