Доступ к дочернему компоненту из родительского компонента

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 ИЛИ 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 ИЛИ 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