Angular2は別のコンポーネントから1つの関数コンポーネントを呼び出す

Question

私はしばらくGoogleのstackoverflowを検索していましたが、何もない、Angular2はDIYのようです。モーダルテンプレート実体化：私はちょうど簡単な操作をしたい

import { Directive, Component, Input, Output, OnInit, OnDestroy, EventEmitter } from '@angular/core'; 
import { MaterializeModule,MaterializeAction } from 'angular2-materialize'; 

declare var $: any 

@Component({ 
selector: "dialogs", 
template: ' 
    <!-- Modal Structure --> 
    <div id="modal1" class="modal bottom-sheet" materialize="modal" [materializeParams]="[{dismissible: false}]" [materializeActions]="modalActions"> 
    <div class="modal-content">Modal Content</div> 
    <div class="modal-footer"> 
     <a class="waves-effect waves-green btn-flat" (click)="closeModal()">Close</a> 
    </div> 
    </div> 
' 
}) 
export class Dialogs implements OnInit { 
    @Output() modalActions = new EventEmitter<string|MaterializeAction>(); 

    constructor() { 
    } 
    ngOnInit() { 
    } 
    openModal() { 
    this.modalActions.emit({action:"modal",params:['open']}); 
    } 
    closeModal() { 
    this.modalActions.emit({action:"modal",params:['close']}); 
    } 

} 

そして、私のheader.component.ts

import {Component, OnInit, OnDestroy} from "@angular/core" 
import { LoginComponent } from '../login/login.component'; 
import { Dialogs } from '../login/login.component'; 

@Component({ 
    selector: 'headerCustom', 
    styleUrls: ['./header.component.css'], 
    template: 
      ` 
    <nav class="navbar-material light-blue lighten-1" role="navigation"> 
    <div class="nav-wrapper"> 
    <a href="#!" class="brand-logo"> 
    <img src="./images/logo.png" /> 
    </a> 
    <a materialize="sideNav" href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a> 
    <ul class="right hide-on-med-and-down"> 
    <li><a href="#">Subscribe</a></li> 
    <li> 
    <a class="waves-effect waves-light btn modal-trigger" (modalActions)="openModal()">Open Modal Login</a> 
    </li> 
    </ul> 
    <ul class="side-nav" id="mobile-demo"> 
    <li><a href="#">Subscribe</a></li> 
    <li> 
    <a class="waves-effect waves-light btn modal-trigger" (modalActions)="openModal()">Open Modal Login</a> 
    </li> 
    </ul> 
    </div> 
    </nav>` 
    }) 
    export class HeaderComponent implements OnInit, OnDestroy { 

    } 

を私はヘッダーのボタンをクリックしたとき、それはモーダルを開くでしょうか？なぜ私はログインコンポーネントの機能を呼び出せないのですか？

私は次のように多くのコードを試しています

<a class="waves-effect waves-light btn modal-trigger" (click)="modalActions.openModal()">Open Modal Login</a> 

しかし、何も。コンポーネントが別のコンポーネントのメソッドとプロパティを手に入れることができ、あなたの助け

Answer 1

A（比較的）簡単な方法のための

おかげで、あなたはローカル変数を使用することです。

ただし、メソッドを呼び出すコンポーネントは、メソッドを含むコンポーネントの直接親のである必要があります。 DialogsコンポーネントがHeaderComponentコンポーネントの子である場合、あなたの場合は

、あなたのコードは次のようになります。

@Component({ 
    selector: 'headerCustom', 
    template: ` 
    <!-- markup --> 
    <button (click)="modal.openModal()">Open</button> 
    <!-- markup --> 
    <dialogs #modal></dialogs> 
    <!-- markup --> 
    ` 
}) 
export class HeaderComponent { } 

親がに使用できる子コンポーネント、上のローカル変数#modalに注意してください。そのメソッドにアクセスしてください（modal.openModal()）。

あなたはコンポーネントツリーをどのように構造化したのか分からなかったので、あなたのケースでは機能しないかもしれません。

official docを参照してください。別のコンポーネントから

Answer 2

コール一つコンポーネント機能 - 角度2

コンポーネントA TSファイル

import { Component, OnInit } from '@angular/core'; 
import { RequestService , RoleService } from '../../services/index'; 
import { Router, ActivatedRoute } from '@angular/router'; 
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 

@Component({ 
    selector: 'app-user-details', 
    templateUrl: './user-details.component.html', 
    styleUrls: ['./user-details.component.css'] 
}) 
export class UserDetailsComponent implements OnInit { 
    loading = false; 
    constructor(private router: Router, 
    private roleService : RoleService) { } 

    ngOnInit() { 
    } 
    userDetails = []; 
    viewDetailsUsers(id){ 
    this.loading = true; 
    this.roleService.viewUser(id) 
    .subscribe(
     data => { 
      this.userDetails = data.result[0]; 
      this.loading = false; 
     }, 
     error => {  
      console.log('error'); 
     }); 
    } 
} 

成分B HTMLファイル

<div class="partImage">   
    <button type="button" class=" details" (click)=modalPop.viewDetailsUsers(item.id) data-backdrop="static" data-toggle="modal" data-target="#userModel">Details</button> 
</div> 
<app-user-details #modalPop></app-user-details> 

Compenent A H TMLは

<div id="userModel" class="modal fade" role="dialog"> 
    <div class="modal-dialog" [hidden]="loading"> 

    <!-- Modal content--> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title">User Detail</h4> 
     </div> 
     <div class="modal-body">  
     <div [hidden]=isHide class="col-lg-12"> 
      <div class="col-lg-4"> 
      <img src="{{APIURL}}{{userDetails.photo_path}}{{userDetails.photo}}" class="img-responsive"> 
      </div> 
      <div class="col-lg-8"> 

      </div> 
     </div> 
     </div> 
     <div style="clear: both"></div> 
    </div> 

    </div> 
</div>