Создание многоразового компонента углов2, который может использоваться в любом месте сайта

Question

Использование: при выполнении асинхронных вызовов я хочу показать какой-то экран обработки, чтобы конечные пользователи знали, что что-то происходит, а не просто смотрят на экран , Поскольку у меня есть несколько мест по всему сайту, где я хочу использовать это, я решил, что сделать его компонентом на «глобальном» уровне является наилучшим подходом.

Проблема: будучи немного новым для angular2, я не получаю, если это проблема, связанная с тем, что она находится вне каталога, в котором существует главный компонент, и OverlayComponent находится в другом месте или если я просто все вместе делаю это неправильно. Я могу заставить компонент работать нормально, но мне нужно иметь возможность вызывать функции, чтобы скрыть/уничтожить компонент, а также отобразить компонент. Я попробовал сделать это услугой, но это меня не улучшило, поэтому я вернулся на круги своя. По существу мой вопрос вращается вокруг создания повторно используемого компонента, который имеет методы, чтобы скрыть/показать себя при вызове из любого компонента, из которого он вызван.

Ниже мой текущий код:

Предположим OverlayComponent.html находится в /public/app/templates/mysite.overlay.component.html

Предположим OverlayComponent.ts находится в/общественных/приложение/ц /app.mysite.overlay.component

Предположим mysite.tracker.component находится в \ Public \ приложение \ ц \ страницы \ Tracker \ mysite.tracker.component.ts

OverlayComponent.html

<div class="overlay-component-container"> 
    <div class="overlay-component" (overlay)="onShowOverlay($event)"> 
     <div>{{processingMessage}}</div> 
     <div> 
      <i class="fa fa-spinner fa-spin" aria-hidden="true"></i> 
     </div> 
    </div> 
</div> 

OverlayComponent.ts

import { Component } from '@angular/core'; 

@Component({ 

    selector: 'overlay-component', 
    templateUrl: '/public/app/templates/mysite.overlay.component.html', 
    styleUrls: ['public/app/scss/overlay.css'] 
}) 

export class OverlayComponent { 

    onShowOverlay(e) { 
     $('.overlay-component').fadeIn(1000); 
    } 

    hideOverlay(e) { 
     $('.overlay-component').fadeOut(1000); 
    } 

} 

TrackerComponent.ts

import { Component, Output, OnInit, EventEmitter } from '@angular/core'; 
import { Http } from '@angular/http'; 

import { TrackerService } from './Tracker.service'; 
import { MenuCollection } from "./MenuCollection"; 
import { Menu } from "./Menu"; 

@Component({ 
    moduleId: module.id, 
    selector: 'tracker-component', 
    templateUrl: '/public/app/templates/pages/tracker/mysite.tracker.component.html', 
    styleUrls: ['../../../scss/pages/racker/tracker.css'], 
    providers: [TrackerService] 
}) 

export class TrackerComponent implements OnInit{ 
    MenuCollection: MenuCollection; 

    @Output() 
    overlay: EventEmitter<any> = new EventEmitter(); 

    constructor(private http: Http, private TrackerService: TrackerService) { 
     let c = confirm("test"); 
     if (c) { 
      this.onShowOverlay(); 
     } 
    } 
    ngOnInit(): void { 
     this.MenuCollection = new MenuCollection(); 
     this.MenuCollection.activeMenu = new Menu('Active Menu', []); 
     this.TrackerService.getTrackerData().then(Tracker => { 
      this.MenuCollection = Tracker; 
      this.MenuCollection.activeMenu = this.MenuCollection.liveMenu; 
      console.log(this.MenuCollection); 

     }, 
     error => { 
      alert('error'); 
     }) 
    } 

    onShowOverlay() { //This doesn't seem to 'emit' and trigger my overlay function 
     this.overlay.emit('test'); 
    } 


} 

На высоком уровне, все, что я хотел сделать, это вызвать функцию компонентов от другого компонент. Заранее спасибо за любой полезный входом

Answer 1

Вы можете использовать @ContentChild аннотации для достижения этой цели:

import { Component, ContentChild } from '@angular/core'; 

class ChildComponent { 
    // Implementation 
} 

// this component's template has an instance of ChildComponent 
class ParentComponent { 
    @ContentChild(ChildComponent) child: ChildComponent; 

    ngAfterContentInit() { 
    // Do stuff with this.child 
    } 
} 

Дополнительных примеров заканчивать документацию @ContentChildren.