如何更新組件，而不在角

Question

我的頁面刷新整個頁面有這樣

<app-header></app-header> 
<router-outlet></router-outlet> 
<app-footer></app-footer> 

在我不知道怎麼只能無需刷新整個頁面更新<app-header></app-header>組件...

我想隱藏用戶成功登錄後，頭中的「登錄」鏈接。標題對於所有組件/路由是通用的。

Answer 1

使用Subject來實現此目的。您可以定義包含Subject的共享服務，您可以訂閱該服務併發出更改。

定義共享服務，例如shared.service.ts：

import { Injectable } from '@angular/core'; 
import { Subject } from 'rxjs'; 

@Injectable() 
export class SharedService { 
    public IsUserLoggedIn: Subject<boolean> = new Subject<boolean>(); 
} 

記住，你需要添加SharedService在AppModule提供商條目。

接下來，將SharedService導入<app-header>和您執行登錄操作的組件中。在<app-header>訂閱更改IsUserLoggedIn主題：

import { SharedService } from './shared.service'; 

export class AppHeaderComponent { 
    // Define a variable to use for showing/hiding the Login button 
    isUserLoggedIn: boolean; 

    constructor(private sharedService: SharedService) { 

     // Subscribe here, this will automatically update 
     // "isUserLoggedIn" whenever a change to the subject is made. 
     this.sharedService.IsUserLoggedIn.subscribe(value => { 
      this.isUserLoggedIn = value; 
     }); 
    } 
} 

在你<app-header> HTML模板，你需要添加*ngIf條件如：

<button *ngIf="!isUserLoggedIn">Login</button> 
<button *ngIf="isUserLoggedIn">Sign Out</button> 

最後，你只需要發出一次事件用戶已經登錄，例如：

someMethodThatPerformsUserLogin() { 
    // Some code 
    // ..... 
    // After the user has logged in, emit the subject changes. 
    this.sharedService.IsUserLoggedIn.next(true); 
} 

Answer 2

許多解決方案之一是創建一個@Injectable()類，其中包含要顯示在標題中的數據。其他組件也可以訪問此類並更改此數據，從而有效更改標題。

另一個選項是設置@Input()變量和@Output() EventEmitter，您可以使用它來更改標題數據。

編輯例子，你要求：

@Injectable() 
export class HeaderService { 
    private _data; 
    set data(value) { 
     this._data = value; 
    } 
    get data() { 
     return this._data; 
    } 
} 

其他組件：

constructor(private headerService: HeaderService) {} 

// Somewhere 
this.headerService.data = 'abc'; 

在標題組件：

let headerData; 

constructor(private headerService: HeaderService) { 
    this.headerData = this.headerService.data; 
} 

我並沒有真正嘗試過這一點。如果get/set不起作用，您可以將其更改爲使用Subject（）;

// Simple Subject() example: 
let subject = new Subject(); 
this.subject.subscribe(response => { 
    console.log(response); // Logs 'hello' 
}); 
this.subject.next('hello'); 

Answer 3

角度檢測到變量變化時會自動更新組件。

因此，您只需要對其進行「刷新」即可確保標題具有對新數據的引用。這可能是通過內header.component.ts或通過@Input可變訂閱...

---

一個例子...

main.html中

<app-header [header-data]="headerData"></app-header> 

main.component.ts

public headerData:int = 0; 

ngOnInit(){ 
    setInterval(()=>{this.headerData++;}, 250); 
} 

個

了header.html

<p>{{data}}</p> 

header.ts

@Input('header-data') data; 

在上面的例子中，報頭將收到新數據每隔250ms的並且因此更新組件。

---

有關角的生命週期掛鉤的更多信息，請參見：https://angular.io/guide/lifecycle-hooks

Answer 4

要更新組件

@Injectable() 
    export class LoginService{ 
    private isUserLoggedIn: boolean = false; 

    public setLoggedInUser(flag) { // you need set header flag true false from other components on basis of your requirements, header component will be visible as per this flag then 
    this.isUserLoggedIn= flag; 
    } 


public getUserLoggedIn(): boolean { 
return this.isUserLoggedIn; 
} 

Login Component ts 
      Login Component{ 
      constructor(public service: LoginService){} 

public login(){ 
service.setLoggedInUser(true); 
} 
      } 
Inside Header component 

Header Component ts 
     HeaderComponent { 
     constructor(public service: LoginService){} 

     public getUserLoggedIn(): boolean { return this.service.getUserLoggedIn()} 
     } 

template of header component: Check for user sign in here 

<button *ngIf="getUserLoggedIn()"Sign Out</button> 
<button *ngIf="!getUserLoggedIn()"Sign In</button> 

可以使用ngIf

App Component ts 
AppComponent { 
public showHeader: boolean = true; 
} 
App Component html 
<div *ngIf='showHeader'> // you show hide on basis of this ngIf and header component always get visible with it's lifecycle hook ngOnInit() called all the time when it get visible 
<app-header></app-header> 
</div> 
<router-outlet></router-outlet> 
<app-footer></app-footer> 

您可以使用許多方法像顯示隱藏也可以使用服務

@Injectable() 
export class AppService { 
private showHeader: boolean = false; 

public setHeader(flag) { // you need set header flag true false from other components on basis of your requirements, header component will be visible as per this flag then 
this.showHeader = flag; 
} 

public getHeader(): boolean { 
return this.showHeader; 
} 
} 

App Component ts 
    AppComponent { 
    constructor(public service: AppService){} 
    } 

App Component html 
    <div *ngIf='service.showHeader'> // you show hide on basis of this ngIf and header component always get visible with it's lifecycle hook ngOnInit() called all the time when it get visible 
    <app-header></app-header> 
    </div> 
    <router-outlet></router-outlet> 
    <app-footer></app-footer>