각도 2 헤더 구성 요소 상태에 따라 동적으로 변경되는 제목

Question

다른 모든 구성 요소가로드되는 머리글 구성 요소, 탐색 모음 구성 요소 및 본문 구성 요소가있는 각도 2를 사용하는 디자인이 있습니다. 사진으로 은 기본적으로 그래서 여기 헤더

1. 아래
2. 탐색
다른 구성 요소 부하가
3. (이 부분은 구성 요소를 중첩 수도/어린이 구성 요소)

을 보여줍니다 , 헤더 구성 요소에 현재 상태를 표시하려고합니다.. 현재 상태의 맨 아래에 이전 상태 인을 표시하려고합니다.

문제점 : 이것을 구현하기 위해 컴포넌트 상호 작용 기술을 사용했습니다. 응용 프로그램이 현재의 기본 값을 표시하고
뒷면 상태를 다시로드되면

• .

• 사용자가 본문의 하위 구성 요소 인 특정 페이지에 곧장 도착하는 시나리오에서 현재 및 백 상태의 기본값 인 을 보여줍니다.

각도가 구성 요소 아키텍처를 따르고 있으므로이 기능을 구현하는 더 좋은 방법이 필요합니다.

그림의 3 절의 자식 구성 요소에 곧바로 들어가면 내 머리글 구성 요소는 머리글 구성 요소의 특정 페이지에 따라 제목/현재 상태를 가져야합니다.

ngOnInit이 현재 상태 값을 전달할 때이 문제에 대한 해결책은 각 구성 요소에 대한 것입니다. 또한 이전 상태 값을 구문 분석합니다. 따라서이 링크의 기술을 사용하여 서비스를 작성한 이후로 헤더 구성 요소가 그대로 표시됩니다. - https://angular.io/docs/ts/latest/cookbook/component-communication.html

그러나 서버에서 데이터를 가져오고 헤더의 현재 상태를 업데이트해야하는 경우가 있습니다. 나는 그것이 전혀 보이지 않는 것을 본다.

좋은 해결책이 필요하십니까?

PS -이 메커니즘은 다른 좀 파일에 그리고 내가 코드 템플릿은 단순한 하나가 될 것으로 보이지만

Answer 1

를 업데이트 할 무기력 오전 비트 복잡하지만 하위 구성 요소 및 입력을 사용하여 달성 될 수 있기 때문에 , 출력 변수.

하위 구성 요소

이

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
     <title (titleChanged)="changedTitle($event)" [title]="title"></title> 
    </div> 
    `, 
}) 
export class App { 
    name:string; 
    title:string="some title"; 
    val:string; 
    constructor() { 
    this.val=""; 

    } 

    changedTitle(va;){ 
    this.title="val" 
    console.log(val); 

    } 
} 

설명으로 서비스에서 콘텐츠를 표시하는

@Component({ 
    selector: 'title', 
    template: ` 
    <div> {{title}}</div> 
    `, 
}) 
export class TitleComponent implements ngOnChanges{ 

    @Input() title:string=""; 
    @Output() titleChanged:EventEmitter<string>=new EventEmitter<string>(); 
    constructor(){ 
    //service call goes here 
    } 
    ngOnChanges(){ 
    console.log(this.val); 
    this.titleChanged.emit(this.title); 
    } 

} 

부모 구성 요소는 다음과 같습니다 서비스 호출이와 때

이

1. 제목 값을 얻는다 변경되었습니다.
2. 입력 속성이 변경되면 ngOnChanges가 자동으로 트리거됩니다.
3. titleChanged은 Output() 변수이며 ngOnChanges가 실행될 때 값을 방출합니다.
4. titleChanged가 트리거되면 changedTitle()의 연결된 메서드가 실행됩니다.

LIVE DEMO

참고 : 내가 텍스트 상자를 사용한 작업 및 DIV 요소에 할당되어이를 보여주기 위해, 당신은 라우팅 구성 요소의 생성자에서이 문제를 수정할 수 있습니다.