Angular2从另一个组件调用一个功能组件

Question

我已经在google，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

从另一个组件调用一个组件函数 - Angular 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>

补充 HTML 文件

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