Question

我正在开发一个Angular 4应用程序，我有一个左侧面板和一个右侧面板。

除了这些面板，我还有其他2个组件。

左侧面板组件包含按钮，右侧面板组件当前为空。

我想要做的是当我点击（例如）左侧面板组件上的按钮1时，它会在右侧面板组件内加载一个组件，依此类推。

它和路由一样，但我已经在我的app.component上使用路由选择顶层主菜单了。

我该怎么做？

Answer 1

您可能希望使用服务来处理此问题。

从公共父组件提供服务并将其注入两个组件内部，您将拥有一个共同的通信poi。此时，您可以在服务的右侧面板组件中订阅一些event，并从左侧调出一个特定的方法：

this is an example of using events inside services

Answer 2

以下是此类实施的粗略示例。

import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
    selector: '[buttonView]'
})
export class ButtonViewDirective {

    constructor(public viewContainerRef: ViewContainerRef) {}

}

import { ComponentFactoryResolver } from '@angular/core';
import { OneComponent,  TwoComponent } from './components';

@Component({
    selector: 'right-panel',
    encapsulation: ViewEncapsulation.Emulated,
    template: `
        <div>
            <ul>
                <li *ngFor="let button of buttons">
                    <button (click)="onButtonClick(button)">{{button.name}}</button>
                </li>
            </ul>
        </div>
        <div>
            <ng-template buttonView></ng-template>
        </div>
    `
})
class RightPanelComponent {

    public buttons: any = [
        {
            name: 'Button 1',
            component: OneComponent
        },
        {
            name: 'Button 2',
            component: TwoComponent
        }
    ]

    @ViewChild(ButtonViewDirective)
    public buttonViewContent: ButtonViewDirective;

    constructor(
        protected _cmpFactoryResolver: ComponentFactoryResolver,
    ) {}

    public onButtonClick(button: any): void {
        this._createComponent(button);
    }

    private _createComponent(button: any): void {
        if (button === null) {
            return;
        }
        setTimeout(() => {
            const cmpFactory = this._cmpFactoryResolver.resolveComponentFactory(button.component);
            const viewContainerRef = this.buttonViewContent.viewContainerRef;
            viewContainerRef.clear();
            viewContainerRef.createComponent(cmpFactory);
        });
    }
}

ButtonViewDirective 在我们的 RightPanelComponent 中像助手一样使用，只是为了更容易引导自定义组件： OneComponent ， TwoComponent < /强>

RightPanelComponent 组合了左边一个面板，用于此示例。如果你想让它们分开，那么右面板将具有渲染和引导自定义组件的逻辑，左面板将具有渲染按钮的逻辑并触发对右侧组件的更改。正确和左之间的通信可以使用中间服务或某种事件，可观察的实现。

以下是官方角度文档中的一些实现示例。 https://angular.io/guide/dynamic-component-loader

组件1中的Angular 2+ Onclick按钮在组件2上显示组件

2 个答案: