formularios - pasar parametros entre componentes angular 4
Pestañas dinámicas con componentes elegidos por clic del usuario (3)
Estoy tratando de configurar un sistema de pestañas que permita que los componentes se registren solos (con un título). La primera pestaña es como una bandeja de entrada, hay muchas acciones / elementos de enlace para elegir para los usuarios, y cada uno de estos clics debería ser capaz de instanciar un nuevo componente, al hacer clic. Las acciones / enlaces vienen de JSON.
El componente instanciado se registrará como una nueva pestaña.
No estoy seguro de si este es el "mejor" enfoque? Hasta ahora, las únicas guías que he visto son para pestañas estáticas, lo que no ayuda.
Hasta ahora, solo tengo el servicio de pestañas que se inicia en main para que persista en toda la aplicación. Se ve algo como esto:
export interface ITab { title: string; }
@Injectable()
export class TabsService {
private tabs = new Set<ITab>();
addTab(title: string): ITab {
let tab: ITab = { title };
this.tabs.add(tab);
return tab;
}
removeTab(tab: ITab) {
this.tabs.delete(tab);
}
}
Preguntas:
-
¿Cómo puedo tener una lista dinámica en la bandeja de entrada que crea pestañas nuevas (diferentes)?
¿Estoy adivinando que se usaría
DynamicComponentBuilder? -
¿Cómo se pueden crear los componentes desde la bandeja de entrada (al hacer clic) registrarse como pestañas y también mostrarse?
Supongo que
ng-content, pero no puedo encontrar mucha información sobre cómo usarlo
EDITAR: un intento de aclarar.
Piense en la bandeja de entrada como una bandeja de entrada de correo. Los elementos se obtienen como JSON y muestra varios elementos. Una vez que se hace clic en uno de los elementos, se crea una nueva pestaña con ese tipo de acción de elementos. El tipo es entonces un componente.
EDITAR 2: Image .
No soy lo suficientemente bueno para los comentarios. Arreglé el plunker de la respuesta aceptada para trabajar para rc2. Nada de lujos, los enlaces a la CDN se rompieron, eso es todo.
''@angular/core'': {
main: ''bundles/core.umd.js'',
defaultExtension: ''js''
},
''@angular/compiler'': {
main: ''bundles/compiler.umd.js'',
defaultExtension: ''js''
},
''@angular/common'': {
main: ''bundles/common.umd.js'',
defaultExtension: ''js''
},
''@angular/platform-browser-dynamic'': {
main: ''bundles/platform-browser-dynamic.umd.js'',
defaultExtension: ''js''
},
''@angular/platform-browser'': {
main: ''bundles/platform-browser.umd.js'',
defaultExtension: ''js''
},
hay un componente listo para usar (compatible con rc5)
ng2-steps
que usa el
Compiler
para inyectar el componente en el contenedor de pasos y el servicio para conectar todo (sincronización de datos)
import { Directive , Input, OnInit, Compiler , ViewContainerRef } from ''@angular/core'';
import { StepsService } from ''./ng2-steps'';
@Directive({
selector:''[ng2-step]''
})
export class StepDirective implements OnInit{
@Input(''content'') content:any;
@Input(''index'') index:string;
public instance;
constructor(
private compiler:Compiler,
private viewContainerRef:ViewContainerRef,
private sds:StepsService
){}
ngOnInit(){
//Magic!
this.compiler.compileComponentAsync(this.content).then((cmpFactory)=>{
const injector = this.viewContainerRef.injector;
this.viewContainerRef.createComponent(cmpFactory, 0, injector);
});
}
}
actualizar
actualizar
ngComponentOutlet
se agregó a 4.0.0-beta.3
actualizar
Hay un trabajo
NgComponentOutlet
en progreso que hace algo similar
https://github.com/angular/angular/pull/11235
RC.7
// Helper component to add dynamic components
@Component({
selector: ''dcl-wrapper'',
template: `<div #target></div>`
})
export class DclWrapper {
@ViewChild(''target'', {read: ViewContainerRef}) target: ViewContainerRef;
@Input() type: Type<Component>;
cmpRef: ComponentRef<Component>;
private isViewInitialized:boolean = false;
constructor(private componentFactoryResolver: ComponentFactoryResolver, private compiler: Compiler) {}
updateComponent() {
if(!this.isViewInitialized) {
return;
}
if(this.cmpRef) {
// when the `type` input changes we destroy a previously
// created component before creating the new one
this.cmpRef.destroy();
}
let factory = this.componentFactoryResolver.resolveComponentFactory(this.type);
this.cmpRef = this.target.createComponent(factory)
// to access the created instance use
// this.compRef.instance.someProperty = ''someValue'';
// this.compRef.instance.someOutput.subscribe(val => doSomething());
}
ngOnChanges() {
this.updateComponent();
}
ngAfterViewInit() {
this.isViewInitialized = true;
this.updateComponent();
}
ngOnDestroy() {
if(this.cmpRef) {
this.cmpRef.destroy();
}
}
}
Ejemplo de uso
// Use dcl-wrapper component
@Component({
selector: ''my-tabs'',
template: `
<h2>Tabs</h2>
<div *ngFor="let tab of tabs">
<dcl-wrapper [type]="tab"></dcl-wrapper>
</div>
`
})
export class Tabs {
@Input() tabs;
}
@Component({
selector: ''my-app'',
template: `
<h2>Hello {{name}}</h2>
<my-tabs [tabs]="types"></my-tabs>
`
})
export class App {
// The list of components to create tabs from
types = [C3, C1, C2, C3, C3, C1, C1];
}
@NgModule({
imports: [ BrowserModule ],
declarations: [ App, DclWrapper, Tabs, C1, C2, C3],
entryComponents: [C1, C2, C3],
bootstrap: [ App ]
})
export class AppModule {}
Ver también angular.io CARGADOR DE COMPONENTES DINÁMICO
versiones anteriores xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Esto cambió nuevamente en Angular2 RC.5
Actualizaré el ejemplo a continuación, pero es el último día antes de las vacaciones.
Este ejemplo de Plunker muestra cómo crear dinámicamente componentes en RC.5
Actualización: use ViewContainerRef .createComponent ()
Debido a que
DynamicComponentLoader
está en desuso, el enfoque debe actualizarse nuevamente.
@Component({
selector: ''dcl-wrapper'',
template: `<div #target></div>`
})
export class DclWrapper {
@ViewChild(''target'', {read: ViewContainerRef}) target;
@Input() type;
cmpRef:ComponentRef;
private isViewInitialized:boolean = false;
constructor(private resolver: ComponentResolver) {}
updateComponent() {
if(!this.isViewInitialized) {
return;
}
if(this.cmpRef) {
this.cmpRef.destroy();
}
this.resolver.resolveComponent(this.type).then((factory:ComponentFactory<any>) => {
this.cmpRef = this.target.createComponent(factory)
// to access the created instance use
// this.compRef.instance.someProperty = ''someValue'';
// this.compRef.instance.someOutput.subscribe(val => doSomething());
});
}
ngOnChanges() {
this.updateComponent();
}
ngAfterViewInit() {
this.isViewInitialized = true;
this.updateComponent();
}
ngOnDestroy() {
if(this.cmpRef) {
this.cmpRef.destroy();
}
}
}
Plunker ejemplo RC.4
Ejemplo de Plunker beta.17
Actualización: use loadNextToLocation
export class DclWrapper {
@ViewChild(''target'', {read: ViewContainerRef}) target;
@Input() type;
cmpRef:ComponentRef;
private isViewInitialized:boolean = false;
constructor(private dcl:DynamicComponentLoader) {}
updateComponent() {
// should be executed every time `type` changes but not before `ngAfterViewInit()` was called
// to have `target` initialized
if(!this.isViewInitialized) {
return;
}
if(this.cmpRef) {
this.cmpRef.destroy();
}
this.dcl.loadNextToLocation(this.type, this.target).then((cmpRef) => {
this.cmpRef = cmpRef;
});
}
ngOnChanges() {
this.updateComponent();
}
ngAfterViewInit() {
this.isViewInitialized = true;
this.updateComponent();
}
ngOnDestroy() {
if(this.cmpRef) {
this.cmpRef.destroy();
}
}
}
original
No estoy completamente seguro de su pregunta sobre cuáles son sus requisitos, pero creo que esto debería hacer lo que desea.
El componente
Tabs
obtiene una matriz de tipos pasados y crea "pestañas" para cada elemento de la matriz.
@Component({
selector: ''dcl-wrapper'',
template: `<div #target></div>`
})
export class DclWrapper {
constructor(private elRef:ElementRef, private dcl:DynamicComponentLoader) {}
@Input() type;
ngOnChanges() {
if(this.cmpRef) {
this.cmpRef.dispose();
}
this.dcl.loadIntoLocation(this.type, this.elRef, ''target'').then((cmpRef) => {
this.cmpRef = cmpRef;
});
}
}
@Component({
selector: ''c1'',
template: `<h2>c1</h2>`
})
export class C1 {
}
@Component({
selector: ''c2'',
template: `<h2>c2</h2>`
})
export class C2 {
}
@Component({
selector: ''c3'',
template: `<h2>c3</h2>`
})
export class C3 {
}
@Component({
selector: ''my-tabs'',
directives: [DclWrapper],
template: `
<h2>Tabs</h2>
<div *ngFor="let tab of tabs">
<dcl-wrapper [type]="tab"></dcl-wrapper>
</div>
`
})
export class Tabs {
@Input() tabs;
}
@Component({
selector: ''my-app'',
directives: [Tabs]
template: `
<h2>Hello {{name}}</h2>
<my-tabs [tabs]="types"></my-tabs>
`
})
export class App {
types = [C3, C1, C2, C3, C3, C1, C1];
}
Ejemplo de Plunker beta.15 (no basado en su Plunker)
También hay una manera de pasar datos que se pueden pasar al componente creado dinámicamente como (
someData
deberían pasarse como
type
)
this.dcl.loadIntoLocation(this.type, this.elRef, ''target'').then((cmpRef) => {
cmpRef.instance.someProperty = someData;
this.cmpRef = cmpRef;
});
También hay algún soporte para usar la inyección de dependencia con servicios compartidos.
Para obtener más detalles, consulte https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html