Angular2从另一个组件调用一个函数组件

Question

我已经搜索了一段时间，在谷歌，stackoverflow，但没有，Angular2似乎是DIY，没有完成…所以我有login.component.ts，它包含了materialize modal模板:

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())。

你没有说你是如何构建你的组件树的，所以它可能不适用于你的情况。

见官方文件

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>

组件A 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>