從父組件訪問子組件

Question

我有一個頭組件和註冊組件以及一個登錄組件。 標頭組件的選擇器用於登錄組件和註冊組件。標題中有一個按鈕。如果用戶在url ... /註冊中，它將顯示爲登錄按鈕。並點擊該按鈕將路線更改登錄

this.router.navigate(['/Login']); 

我想改變該按鈕進入「註冊」，當用戶移動到登錄頁面。我如何從登錄組件和註冊組件中控制該按鈕。

Answer 1

我已經完成了它使用@Input API。

Boot.ts

import {Component,bind} from 'angular2/core'; 
import {ROUTER_PROVIDERS,RouteConfig, ROUTER_DIRECTIVES,APP_BASE_HREF,LocationStrategy,RouteParams,ROUTER_BINDINGS} from 'angular2/router'; 
import {bootstrap} from 'angular2/platform/browser'; 

import{ComponentOne} from 'src/cone'; 
import{ComponentTwo} from 'src/ctwo'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <h1>Component Router</h1> 
    <nav> 
    <hr> 
     <a [routerLink]="['ComponentOne']">Login</a><hr/> 
     <a [routerLink]="['ComponentTwo']">Registartion</a> 
    </nav> 
    <hr> 
    <router-outlet></router-outlet> 
    `, 
    directives: [ROUTER_DIRECTIVES] 
}) 
@RouteConfig([ 
    {path:'/component-one', name: 'ComponentOne', component: ComponentOne useAsDefault:true}, 
    {path:'/component-two', name: 'ComponentTwo', component: ComponentTwo} 
]) 
export class AppComponent { } 

    bootstrap(AppComponent, [ 
     ROUTER_PROVIDERS,bind(APP_BASE_HREF).toValue(location.pathname) 
    ]); 

Login.ts OR cone.ts

import {Component,View,ViewChild} from 'angular2/core'; 
import {HeaderCmp} from 'src/header'; 


@Component({ 
    template: ` 

    <header text="Registration"></header> 
    <hr> 
    <h1>Login</h1> 
    `, 
    directives:[HeaderCmp] 
    }) 

    export class ComponentOne { 

     constructor(){ 
      console.log("first component being called"); 
     } 

    } 

Registartion.ts OR ctwo.ts

import {Component,View} from 'angular2/core'; 
import {HeaderCmp} from 'src/header'; 

@Component({ 
    template: ` 
    <header text="Login"></header> 
    <h1>Registration </h1> 
    `, 
    directives:[HeaderCmp] 
    }) 

    export class ComponentTwo{ 
    constructor(){ 

     console.log("Second component being called"); 
    } 
    } 

Header.ts

import {Component,View,Input} from 'angular2/core'; 
import {sharedService} from 'src/sharedService'; 

@Component({ 
    selector:'header', 
    template: ` 
    <h4>Header </h4> 
    <button>{{text}}</button> 
    ` 
    }) 

    export class HeaderCmp{ 
    @Input() text: string='myText'; 

     constructor(){ 
       console.log("Header being called"); 
     } 

} 

Working Demo