Как плагин компонента в другой компонент

Question

У меня есть компонент А, это плагин к index.html, и есть шаблон:

<div> content of A </div> 
<component-will-plugin></component-will-plugin> 
<button (click)="pluginBtoA()">click me to plugin B to plugin A </button> 

и код функции pluginBtoA:

pluginBtoA(){ 
    redirectToB; 
} 

Как подключить компонент B в компоненте A, когда я нажимаю кнопку?

Спасибо за прочитайте мой вопрос.

Answer 1

Вы можете использовать DynamicComponentLoader и его loadIntoLocation метод так:

@Component({ 
    selector: 'my-app', 
    template: ` 
    Parent 
    <div #child></div> 
    <div (click)="onClick()">Add sub component</div> 
    ` 
}) 
export class MyApp { 
    constructor(private dcl: DynamicComponentLoader, 
       private elementRef: ElementRef) { 
    } 

    onClick() { 
    this.dcl.loadIntoLocation(ChildComponent, this.elementRef, 'child'); 
    } 
} 

Answer 2

Этот пример является адрес страницы Angular2 IO.

@Component({ 
    selector: 'child-component', 
    template: 'Child' 
}) 

class ChildComponent { 
} 

@Component({ 
    selector: 'my-app', 
    template: 'Parent (<div #child></div>)' 
}) 

class MyApp implements OnInit { 
    constructor(private dcl: DynamicComponentLoader, private elementRef: ElementRef) { 

    } 

    ngOnInit(){ 
     this.dcl.loadIntoLocation(ChildComponent, this.elementRef, 'child'); 
    } 
} 

Вы можете прочитать об этом https://angular.io/docs/ts/latest/api/core/DynamicComponentLoader-class.html#!#loadIntoLocation

Теперь вы можете перемещать this.dcl.loadIntoLocation(ChildComponent, this.elementRef, 'child'); в вызывающей функции, когда вы, например, нажмите

:

pluginBtoA(){ 
    //redirectToB; 
    this.dcl.loadIntoLocation(ChildComponent, this.elementRef, 'child'); 
}