Angular2從另一個組件調用一個功能組件

Question

我一直在尋找一段時間，在谷歌，stackoverflow，但沒有，Angular2似乎是DIY，沒有完成..所以我有login.component.ts，包含物化模式的模板：

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

（相對）簡單的方法，一個組件可以得到另一個組件的方法和屬性保持是使用局部變量。

但是，它確實要求調用方法的組件是包含方法的組件的直接父項。

在你的情況下，如果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甲ħ 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>