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>