Góc 2 Thành phần tiêu đề Tiêu đề thay đổi động theo trạng thái

Question

Tôi có thiết kế sử dụng góc 2 trong đó thành phần tiêu đề, thành phần thanh điều hướng và thành phần cơ thể nơi tất cả các thành phần khác tải. Như hình ảnh cho thấy bên dưới

1. Tiêu đề
2. Navigation
3. đâu linh kiện tải khác (phần này có thể đã lồng components/trẻ em thành phần)

Vì vậy, đây cơ bản , Trong thành phần tiêu đề, tôi muốn hiển thị trạng thái hiện tại . Và ở cuối trạng thái hiện tại, tôi muốn hiển thị trạng thái trước đó của người dùng.

Sự cố: Để thực hiện điều này, tôi đã sử dụng kỹ thuật tương tác thành phần trong góc.

• khi ứng dụng được nạp lại nó cho thấy giá trị mặc định cho hiện tại và
  các bang lại.

• Trong trường hợp như nơi người dùng thẳng đến trang cụ thể cũng là thành phần con trong nội dung, nó hiển thị giá trị mặc định cho trạng thái hiện tại và trạng thái sau.

Vì góc cạnh đang theo kiến ​​trúc thành phần Tôi muốn có cách tốt hơn để triển khai tính năng này.

Nếu tôi thẳng đến một thành phần con trong phần-3 trong ảnh, thành phần đầu đề của tôi sẽ lấy tiêu đề/trạng thái hiện tại theo trang cụ thể trong thành phần đầu trang.

Giải pháp của tôi cho điều này là trong mỗi thành phần khi ngOnInit tôi chuyển giá trị trạng thái hiện tại. Ngoài ra tôi phân tích giá trị trạng thái trước đó. Do đó thành phần tiêu đề hiển thị nó vì đó là do dịch vụ được viết bằng kỹ thuật trong liên kết này - https://angular.io/docs/ts/latest/cookbook/component-communication.html

Nhưng có một số trường hợp tôi nhận dữ liệu từ máy chủ và phải cập nhật trạng thái hiện tại của tiêu đề. Ở đó tôi thấy điều đó không hiển thị chút nào.

Cần trợ giúp với giải pháp tốt.

PS - Kể từ khi cơ chế này là trong kinda file khác nhau và đó là một chút phức tạp Tôi không nơi nương tựa để cập nhật một mẫu mã

Answer 1

Mặc dù nó có vẻ là một đơn giản, nhưng nó có thể đạt được sử dụng thành phần trẻ và Input , Các biến đầu ra.

Component Child để hiển thị nội dung từ dịch vụ

@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); 
    } 

} 

thành phần Chánh sẽ như

@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); 

    } 
} 

Giải thích:

1. Khi cuộc gọi dịch vụ được thực hiện và giá trị tiêu đề được đã thay đổi.
2. Khi thay đổi thuộc tính đầu vào, ngOnChanges sẽ được kích hoạt tự động.
3. Các tiêu đề Thay đổi là biến Output() và phát ra giá trị khi bao giờ ngOnChanges được thực hiện.
4. Khi tiêu đềThay đổi được kích hoạt, phương pháp được liên kết trong changedTitle() sẽ được thực thi.

LIVE DEMO

Lưu ý: Để hiển thị này đang làm việc tôi đã sử dụng một hộp văn bản và gán nó vào phần tử div, bạn có thể sửa đổi này trong các nhà xây dựng của các thành phần chuyển.