Angularjs2 Bir bileşenden diğerine işlev çağırmak nasıl?

Question

Senaryo: Bir başlık bileşenim var ve bir giriş sayfası bileşenim var. Oturum açıp açmadığınıza bağlı olarak, başlığı güncelleştirmek için oturum açma sayfası bileşenindeki başlık bileşeninden bir işlev aramak istiyorum.

Soru: Birisi bunu yapmayı nasıl yapacağımı açıklayabilir mi? @ViewChild'i hiçbir şekilde kullanmadan denedim. Dahası, eğer bu yanlış yoldan gidersem belki de beni daha iyi bir şekilde aydınlatabilirsin?

Şerefe!

import ... 

@Component({ 
    selector: 'header', 
    templateUrl: '/views/header.html', 
    directives: [ROUTER_DIRECTIVES], 
}) 

export class Header { 

    constructor() { 

    } 

    public updateRight() { 
     alert("nope"); 
    } 

} 


import ... 


@Component({ 
    selector: 'login', 
    templateUrl: '/views/login.html', 
    providers: [HTTP_PROVIDERS], 
}) 

export class Login { 
    @ViewChild(Header) header: Header; 

    constructor(http: Http) { 
    } 

    onSubmit() { 
     // call function to update header stuffs 
     this.header.updateRight(); 
    } 

} 

main.ts şablon

<header></header> 
<router-outlet></router-outlet> 

header.ts şablon

<div id="header-wrap"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-3"> 
       <h3><strong><a [routerLink]="['/Home']">HomePage</a></strong></h3> 
      </div> 
      <div class="col-md-6"> 
      </div> 
      <div class="col-md-3" style="text-align: right;"> 
       <a [routerLink]="['/Login']">Log In</a> 
       <a [routerLink]="['/Register']">Sign Up</a> 
      </div> 
     </div> 
    </div> 
</div> 

login.ts şablon

Aslında

<div class="container padme"> 
    login 
</div> 

Answer 1

yapabilirsiniz tek koz Bu öğeler için @ViewChild Bileşenin şablonunda yer alır.

@Component({ 
    (...) 
    template: ` 
    <header></header> 
    ` 
}) 
export class Login { 
    @ViewChild(Header) header: Header; 
    (...) 
} 

Üstelik gelen değer sonradan komponent yapıcı mevcut olması ancak olmaz::

Bu böyle bir şey varsa (selektör Header bileşen header olduğu varsayılarak) uygular Görünüm sorguları, ngAfterViewInit geri aranması çağrılmadan önce ayarlanır. Eğer iki bileşen arasındaki bu ilişkiyi yoksa

@Component({ 
    (...) 
    template: ` 
    <header></header> 
    ` 
}) 
export class Login { 
    @ViewChild(Header) header: Header; 

    ngAfterViewInit() { 
    this.header.someFunction(); 
    } 
} 

(ve bunu dava olduğunu düşünüyorum - aynı seviyede veya farklı bileşenler:

Yani böyle kodunuzu refactor olabilir bileşen ağaçları), iletişim kurmak için paylaşılan bir hizmet kullanmalısınız. Sen

bu seviyede Bu sorular ... servis aracını uygulamaya gözlenebilirleri kaldıraç olabilir:

• Delegation: EventEmitter or Observable in Angular2
• Angular 2 - Using Shared Service