Angularjs2 Как вызвать функцию из одного компонента в другой?

Сценарий: У меня есть компонент заголовка и компонент входа в систему. Я хотел бы вызвать функцию из компонента заголовка на компоненте страницы входа в систему, чтобы обновить заголовок на основе того, вошли ли вы в систему или нет.Angularjs2 Как вызвать функцию из одного компонента в другой?

Вопрос: Может кто-нибудь объяснить, как я буду заниматься этим? Я пробовал использовать @ViewChild без успеха. Кроме того, если я ошибаюсь, возможно, вы можете просветить меня лучше?

Cheers!

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

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

Шаблон header.ts

<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

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

источник

2016-04-06 Zander17

Просьба предоставить больше коды. Как связаны «Логин» и «Заголовок»? –

Это звучит как очень подходящее место для использования службы с именем 'LoginService', которую вы вводите в« HeaderComponent »и« LoginComponent »и обмениваетесь данными – PierreDuc

. Это все еще не показывает, как связаны компоненты. Можете ли вы добавить шаблоны? –

На самом деле, вы можете только рычаги @ViewChild для элементов, которые re содержится в шаблоне компонента. Это относится, если у вас есть что-то подобное (при условии, что селектор является Header компонент header):

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

Кроме того, соответствующее значение не будет доступно в компоненте конструктора, но позже:

Запросы просмотра задаются перед вызовом обратного вызова ngAfterViewInit.

Таким образом, вы могли бы реорганизовать код так:

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

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

Если вы не имеете это соотношение между двумя компонентами (и я думаю, что это дело - компоненты на одном уровне или на разных деревья компонентов), вы должны использовать общий сервис, чтобы они обменивались данными. Вы можете использовать наблюдаемые для реализации сервисной шины ...

Смотрите эти вопросы на этом уровне:

источник

2016-04-06 13:30:37

Angularjs2 Как вызвать функцию из одного компонента в другой?

ответ

Смежные вопросы