Angular2 вызывает один компонент функции из другого компонента

Я некоторое время искал в google, stackoverflow, но ничего, Angular2, похоже, сделан своими руками, а не закончен. Итак, у меня есть 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>

Но ничего.

Спасибо за вашу помощь


angular angular2-services angular2-components
person csu    schedule 16.11.2016    source источник

Ответы (2)


arrow_upward
3
arrow_downward

(Относительно) простой способ, с помощью которого компонент может получить доступ к методам и свойствам другого компонента, заключается в использовании локальной переменной.

Однако для этого требуется, чтобы компонент, вызывающий методы, был прямым родителем компонента, содержащего методы.

В вашем случае, если компонент Dialogs является дочерним элементом компонента HeaderComponent, ваш код будет выглядеть так:

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

Обратите внимание на локальную переменную #modal в дочернем компоненте, которую родительский компонент может использовать для доступа к своим методам (modal.openModal()).

Вы не сказали, как структурировали дерево компонентов, поэтому в вашем случае это может не сработать.

См. официальный документ.

person AngularChef    schedule 16.11.2016
comment
Ты ЗАМЕЧАТЕЛЬНЫЙ :), на самом деле это так просто, это хорошо работает !!!! Спасибо большое !! - person csu; 16.11.2016

arrow_upward
2
arrow_downward

Вызов функции одного компонента из другого компонента — 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');
        });
  }
}

HTML-файл компонента B

<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>
person DINESHKUMAR S    schedule 24.11.2017