Question

使用案例：在进行异步调用时，我希望显示某种处理屏幕，以便最终用户知道正在发生的事情，而不仅仅是盯着屏幕。由于我在整个网站中有多个地方我想要使用它，我想把它作为＆＃34;全球＆＃34;的一个组成部分。水平是最好的方法。

问题：对于angular2稍微有点新意，如果这是一个问题，它是在主要组件存在的目录之外，而OverlayComponent在另一个位置，或者我只是一起做错了。我可以让组件正常工作但我需要能够调用函数来隐藏/销毁组件并显示组件。我试过把它作为一项服务，但这并没有让我更进一步，所以我回到原点。基本上我的问题围绕构建一个可重用的组件，该组件具有隐藏/显示自身的方法，当从它调用的任何组件调用时。

以下是我目前的代码：

假设OverlayComponent.html位于/public/app/templates/mysite.overlay.component.html

假设OverlayComponent.ts位于/public/app/ts/app.mysite.overlay.component

假设mysite.tracker.component位于\ public \ app \ ts \ pages \ 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文档。

制作可重复使用的angular2组件，可在网站上的任何位置使用

1 个答案: